/* CricketWindies "Insert GIF" editor toolbar button + picker.
 *
 * Deliberately NOT another 16x16 monochrome icon matching Bold/Italic/etc.
 * (every existing toolbar button already looks like that, and a same-style
 * icon reads as "one of the boring formatting options" — easy to miss in a
 * row of a dozen identical-looking gray squares). This one is meant to be
 * found and used, so it's GIPHY's own brand-gradient badge with real text ("Insert GIF",
 * not just "GIF" — legible at a glance in a row of icons with no labels
 * at all), sized to its own content rather than the toolbar's fixed 16px
 * icon grid, and moved into its own group at the very end of the toolbar
 * rather than sitting mid-row where it read as just another button.
 *
 * Specificity note: .sceditor-button-gif and .sceditor-button-gif div are
 * each exactly as specific as the base .sceditor-button / .sceditor-button
 * div rules they override (jscripts/sceditor/themes/mybb.css) — this file
 * loads after that one (see headerinclude), so these win on cascade order
 * alone, same as that file's own .sceditor-button-video override already
 * does for its icon.
 */

.sceditor-button-gif {
	/* height intentionally NOT touched — inherits the base .sceditor-button
	   rule's own height so this sits flush with every neighboring button
	   (the first version added a 1px border on top of that, pushing the
	   box visibly taller than everything beside it). Vertical centering
	   is done with flex, not a guessed line-height — this project's actual
	   toolbar button height turned out to be 30px, not the 20px
	   jscripts/sceditor/themes/mybb.css's own base rule states, so
	   anything hardcoded to a specific pixel figure here would drift out
	   of alignment again the moment that assumption was wrong twice. */
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: auto !important;
	padding: 0 10px !important;
	margin: 1px 2px;
	/* GIPHY's own brand gradient (from their site's own button styling) —
	   fitting given the "Powered By GIPHY" mark this button's dropdown
	   already carries; a plain solid color wouldn't read as GIPHY's own
	   the way this does. */
	background: linear-gradient(to right, rgb(97, 87, 255), rgb(0, 230, 204), rgb(97, 87, 255)) 0% 100% / 300% auto;
	border: 0;
	border-radius: 4px;
	box-sizing: border-box;
	color: #fff;
	text-decoration: none;
	transition: background-position .4s ease;
}

/* The button is a plain <a> (SCEditor's own markup), which otherwise picks
   up this theme's generic a:hover styling (gold text, underline) — this
   overrides that explicitly rather than relying on it never applying. */
.sceditor-button-gif:hover,
.sceditor-button-gif:focus,
.sceditor-button-gif:active {
	background-position: 100% 100%;
	color: #fff;
	text-decoration: none;
}

.sceditor-button-gif div {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: auto !important;
	height: 100% !important;
	overflow: visible !important;
	background: none !important;
}

.sceditor-button-gif div::after {
	content: "Insert GIF";
	display: inline-block;
	color: #fff;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .3px;
	text-decoration: none;
	white-space: nowrap;
}

/* --- Picker dropdown content (rendered inside SCEditor's own
   div.sceditor-dropdown, which already provides the card/shadow chrome —
   this only styles what's inside it). --- */

.giphy-picker { width: 288px; }

.giphy-picker__search {
	box-sizing: border-box;
	width: 100%;
	padding: 6px 9px;
	margin-bottom: 8px;
	border: 1px solid var(--border-strong, #ccc);
	border-radius: 4px;
	font-size: 13px;
}

.giphy-picker__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 5px;
	max-height: 360px;
	overflow-y: auto;
}

.giphy-picker__thumb {
	display: block;
	width: 100%;
	height: 62px;
	object-fit: cover;
	border-radius: 4px;
	cursor: pointer;
	background: var(--surface-alt, #f2f2f2);
}

.giphy-picker__thumb:hover,
.giphy-picker__thumb:focus-visible {
	outline: 2px solid var(--maroon, #54102b);
	outline-offset: 1px;
}

.giphy-picker__status {
	grid-column: 1 / -1;
	padding: 14px 0;
	color: var(--muted, #666);
	font-size: 12px;
	text-align: center;
}

/* GIPHY's own API Terms of Service require a conspicuous "Powered By
   GIPHY" mark wherever the API is used — this is a condition of the
   production API key itself, not just an attribution courtesy like
   CricAPI's, so it's styled to actually be seen rather than as a faint
   afterthought line. */
.giphy-picker__credit {
	margin: 8px 0 0;
	padding-top: 6px;
	border-top: 1px solid var(--border, #e4ddd7);
	color: var(--muted, #666);
	font-size: 11px;
	font-weight: 700;
	text-align: center;
	letter-spacing: .2px;
}