/* GIFs in comments (Gif.php, www/js/modules/gif.js): embeds, the "GIF" button, the picker, the attachment strip.
 * Theme variables from nb.css only (the "via" caption sits on the image and uses a fixed dark scrim in both themes). */

/* ------------------------------------------------------------ embed in a comment */
.nb-gif {
	position: relative; display: inline-block; max-width: min(100%, 400px); margin: 4px 0; vertical-align: top;
	line-height: 0; border-radius: var(--radius); overflow: hidden; background: var(--muted);
	border: 1px solid var(--border);
}
.nb-gif picture { display: block; }
.nb-gif-img {
	display: block; max-width: 100%; height: auto; aspect-ratio: var(--gif-ar, auto); object-fit: cover;
}
.nb-gif-via {
	position: absolute; right: 4px; bottom: 4px; padding: 2px 5px; border-radius: var(--radius-sm);
	background: rgba(0, 0, 0, .58); color: #fff; font: 600 9.5px/1.2 var(--font-sans); letter-spacing: .04em;
	pointer-events: none;
}
.nb-gif-play { display: none; }
@media (prefers-reduced-motion: reduce) {
	.nb-gif { cursor: pointer; }
	.nb-gif-play {
		position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 5px;
		padding: 6px 10px; border-radius: var(--radius); background: rgba(0, 0, 0, .66); color: #fff;
		font: 750 12px/1 var(--font-sans); letter-spacing: .06em; pointer-events: none;
	}
	.nb-gif.is-playing .nb-gif-play { display: none; }
	.nb-gif:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
}
.nb-d-text p:has(> .nb-gif:only-child), .c-body p:has(> .nb-gif:only-child) { margin: 6px 0; }

/* ------------------------------------------------------------ button in composer bars */
.nb-gif-btn { gap: 0; padding: 0 8px; }
.nb-gif-btn-mark {
	display: inline-block; padding: 2px 3px 1px; border: 1.5px solid currentColor; border-radius: 2px;
	font: 800 9.5px/1 var(--font-sans); letter-spacing: .06em;
}
.nb-gif-btn[aria-expanded="true"] { background: var(--accent); color: var(--foreground); }
.nb-gif-btn[data-nb-gif-off] { opacity: .75; }

/* ------------------------------------------------------------ attachment strip under the textarea */
.nb-gif-strip {
	display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 10px; border-top: 1px dashed var(--border);
	background: color-mix(in oklab, var(--muted) 50%, transparent);
}
.bl-reply-box .nb-gif-strip { border: 1px dashed var(--border); border-radius: var(--radius); margin-top: 6px; }
.nb-gif-chip {
	position: relative; line-height: 0; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--border);
	background: var(--muted); max-width: 160px;
}
.nb-gif-chip img { display: block; height: 56px; width: auto; max-width: 160px; object-fit: cover; }
.nb-gif-chip-rm {
	position: absolute; top: 3px; right: 3px; display: grid; place-items: center; width: 22px; height: 22px; padding: 0;
	border: 0; border-radius: var(--radius-sm); background: rgba(0, 0, 0, .66); color: #fff; cursor: pointer;
}
.nb-gif-chip-rm:hover, .nb-gif-chip-rm:focus-visible { background: var(--destructive); }
.nb-gif-chip-rm svg { width: 13px; height: 13px; }

/* ------------------------------------------------------------ picker */
.nb-gif-picker {
	position: absolute; z-index: 1060; width: min(400px, calc(100vw - 24px)); height: 460px; box-sizing: border-box;
	display: flex; flex-direction: column; gap: 8px; padding: 10px 10px 8px;
	background: var(--popover); color: var(--foreground); border: 1px solid var(--border); border-radius: var(--radius-lg);
	box-shadow: var(--elev-3);
}
.nb-gif-picker[hidden] { display: none; }
.nb-gif-picker.is-off { height: auto; }
.nb-gif-picker.is-sheet {
	position: fixed; left: 0 !important; right: 0; bottom: 0; top: auto !important; width: 100%; height: min(72vh, 520px);
	border-radius: var(--radius-lg) var(--radius-lg) 0 0; border-bottom: 0;
}
.nb-gif-picker.is-sheet.is-off { height: auto; }
.nb-gif-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.nb-gif-title { margin: 0; font-size: 13px; font-weight: 650; letter-spacing: .01em; }
.nb-gif-close { width: 30px; height: 30px; }
.nb-gif-search {
	position: relative; display: block; margin: 0;
}
.nb-gif-search[hidden] { display: none; }
.nb-gif-search svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--muted-foreground); pointer-events: none; }
.nb-gif-picker .nb-gif-search input[type="search"] {
	-webkit-appearance: none; appearance: none;
	display: block; width: 100%; max-width: none; height: 36px; margin: 0; box-sizing: border-box; padding: 0 10px 0 34px;
	border: 1px solid var(--input); border-radius: var(--radius); background: var(--card-solid); color: var(--foreground);
	font: 400 14px/34px var(--font-sans); box-shadow: none;
}
.nb-gif-picker .nb-gif-search input[type="search"]:focus { border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 18%, transparent); outline: none; }
.nb-gif-label { margin: 0; font-size: 11.5px; font-weight: 650; text-transform: uppercase; letter-spacing: .08em; color: var(--muted-foreground); min-height: 14px; }
.nb-gif-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin: 0 -4px; padding: 0 4px; }
.nb-gif-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.nb-gif-sentinel { height: 1px; }
.nb-gif-item {
	position: relative; display: block; width: 100%; height: 100px; padding: 0; overflow: hidden; cursor: pointer;
	border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--muted);
}
.nb-gif-item img { display: block; width: 100%; height: 100%; object-fit: cover; }
.nb-gif-item:hover { border-color: var(--ring); }
.nb-gif-item:focus-visible, .nb-gif-item[aria-selected="true"]:focus { outline: 2px solid var(--ring); outline-offset: 1px; }
.nb-gif-status { margin: 0; font-size: 12.5px; color: var(--muted-foreground); text-align: center; }
.nb-gif-status:empty { display: none; }
.nb-gif-picker.is-busy .nb-gif-scroll { cursor: progress; }
.nb-gif-foot {
	margin: 0 -10px -8px; padding: 6px 10px; border-top: 1px solid var(--border); text-align: right;
	font: 700 10.5px/1.3 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted-foreground);
}
.nb-gif-foot[hidden] { display: none; }
.nb-gif-off { display: grid; justify-items: center; gap: 6px; padding: 18px 10px 12px; text-align: center; color: var(--foreground); }
.nb-gif-off b { font-size: 14px; }
.nb-gif-off p { margin: 0 0 6px; color: var(--muted-foreground); font-size: 13px; }
@media (max-width: 639px) {
	.nb-gif-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.nb-gif-item { height: 92px; }
}
@media (max-width: 420px) {
	.nb-gif-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ------------------------------------------------------------ phones: the picker is a bottom sheet (gif.js adds .is-sheet under 640 px)
   It clears the home indicator (safe area), uses the dynamic viewport height (mobile URL bar) and dims the page behind it. */
.nb-gif-picker.is-sheet {
	height: min(72dvh, 520px); padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
	box-shadow: 0 -14px 34px -14px oklch(0 0 0 / .4), 0 0 0 100vmax oklch(0 0 0 / .3);
}
.nb-gif-picker.is-sheet.is-off { height: auto; }
@media (max-width: 760px), (pointer: coarse) {
	/* .nb-gif-picker prefix: nb.css (.nb-icon-btn, loaded later) kept the close button at 36 px */
	.nb-gif-picker .nb-gif-close { width: 40px; height: 40px; margin: -4px -4px -4px 0; }
	.nb-gif-picker .nb-gif-search input[type="search"] { height: 40px; line-height: 38px; }
	.nb-gif-chip-rm { width: 30px; height: 30px; }
}