/* External GIFs are privacy-safe by default: viewers opt in before the browser fetches them. */
.gif-consent-wrap{display:inline-flex;align-items:center;gap:6px;vertical-align:middle;flex-wrap:wrap}
.gif-load-button{border:1px solid var(--border,#2d303d);background:rgba(255,255,255,.06);color:inherit;border-radius:7px;padding:3px 7px;font:inherit;font-size:.82em;cursor:pointer}
.gif-load-button:hover{background:rgba(255,255,255,.11)}

/* v1.1.6 settings navigation cleanup */
.settings-card>.settings-nav,
.settings-card>.settings-page-header{grid-column:1/-1}
.settings-nav{display:flex;align-items:center;gap:6px;overflow-x:auto;padding:5px;margin:2px 0 12px;border:1px solid var(--border);border-radius:10px;background:#0a0d11;scrollbar-width:thin}
.settings-nav-button{flex:0 0 auto;height:34px;border:1px solid transparent;border-radius:7px;background:transparent;color:#8f9aa8;padding:0 13px;font-size:11px;font-weight:850;letter-spacing:.01em;white-space:nowrap}
.settings-nav-button:hover{color:#e7ebef;background:#151b22}
.settings-nav-button.active{color:#f5f7f9;background:#1b222b;border-color:#303b47;box-shadow:0 1px 0 rgba(255,255,255,.03) inset}
.settings-page-header{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:0 2px 12px;margin-bottom:2px;border-bottom:1px solid var(--border)}
.settings-page-copy{min-width:0;display:flex;flex-direction:column;gap:3px}.settings-page-copy strong{font-size:14px;color:#f1f4f7}.settings-page-copy span{font-size:10px;color:var(--muted);line-height:1.4}
.settings-card>[data-settings-page]:not(.settings-page-active){display:none!important}
.settings-card>.settings-section.settings-page-active{min-width:0;border:1px solid #252e38;border-radius:11px;background:#0d1116;padding:14px!important;margin:10px 0 0}
.settings-card>.owner-dashboard-section.settings-page-active,.settings-card>.owner-access-section.settings-page-active{margin-top:10px}
.settings-card>.settings-page-actions.settings-page-active{grid-column:1/-1;margin-top:10px;padding:12px;border:1px solid #3a292d;border-radius:10px;background:#130d0f;align-items:center}
.settings-actions-label{margin-right:auto;color:#bda3a7;font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.08em}
.settings-card .settings-section-title{margin-bottom:11px}.settings-card .settings-section-title>span:first-child{font-size:12px}
.settings-card .field-label:first-child{margin-top:0}
.settings-card .privilege-grid{gap:8px}
.settings-card .privilege-card{background:#090c10}
.settings-card .toggle-row{min-height:38px;padding:7px 9px;border:1px solid var(--border);border-radius:8px;background:#090c10;margin-top:6px}
@media(max-width:900px){
  .settings-nav{margin-bottom:10px}
  .settings-page-header{padding-bottom:10px}
  .settings-card>.settings-section.settings-page-active{grid-column:1!important}
}
@media(max-width:560px){
  .settings-card{padding:17px 14px}
  .settings-nav{margin-left:-2px;margin-right:-2px}
  .settings-nav-button{height:36px;padding:0 11px}
  .settings-page-header{align-items:flex-start}.settings-page-copy span{max-width:260px}
  .settings-card>.settings-page-actions.settings-page-active{align-items:stretch;flex-direction:column}.settings-actions-label{margin:0 0 2px}.settings-page-actions button{width:100%}
}


/* v1.1.8 - GIPHY picker */
.composer-row-media{grid-template-columns:36px minmax(0,1fr) 58px}
.composer-row-media.has-giphy{grid-template-columns:36px 42px minmax(0,1fr) 58px}
.composer-gif-button{height:36px;min-width:42px;border:0;border-radius:7px;background:transparent;color:#b8c0ca;font-size:11px;font-weight:800;letter-spacing:.04em}
.composer-gif-button:hover{background:var(--panel-3);color:var(--text)}
.composer-gif-button:disabled{opacity:.45;cursor:not-allowed}
.giphy-picker{position:absolute;z-index:9;left:8px;right:8px;bottom:62px;height:min(520px,66vh,calc(100% - 76px));max-height:min(520px,66vh);min-height:0;display:grid;grid-template-rows:auto auto auto minmax(0,1fr);border:1px solid var(--border);border-radius:10px;background:#0e1116;box-shadow:0 16px 40px rgba(0,0,0,.48);overflow:hidden}
.giphy-picker[hidden]{display:none}
.giphy-picker-head>div:first-child{display:flex;align-items:center;gap:8px;min-width:0}
.giphy-powered{font-size:10px;line-height:1;color:#aab2bd;text-transform:uppercase;letter-spacing:.08em;white-space:nowrap}
.giphy-toolbar{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:6px;padding:8px;border-bottom:1px solid var(--border)}
.giphy-toolbar input{min-width:0}
.giphy-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;padding:8px;min-height:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y;scrollbar-gutter:stable;align-content:start}
.giphy-cell{position:relative;display:block;border:1px solid var(--border);border-radius:8px;background:#07090c;padding:0;overflow:hidden;min-height:92px;cursor:pointer}
.giphy-cell:hover{border-color:#4b5a57}
.giphy-cell img{display:block;width:100%;height:118px;object-fit:cover;background:#050607}
.giphy-cell-label{position:absolute;left:0;right:0;bottom:0;padding:16px 6px 5px;background:linear-gradient(transparent,rgba(0,0,0,.8));color:#fff;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left}
.giphy-empty{grid-column:1/-1;padding:28px 10px;color:var(--muted);text-align:center;font-size:12px}
.giphy-line,.gif-link-line{display:flex;align-items:flex-start;min-width:0}
.gif-message-content{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.gif-author-row{display:flex;align-items:center;min-width:0;line-height:1.2}
.gif-author-row .message-author{margin-right:0}
.giphy-message{display:block;margin-top:2px;vertical-align:top}
.giphy-message .gif-post{margin:0;max-width:240px;max-height:180px}
.giphy-message-credit{display:block;margin-top:2px;color:var(--muted);font-size:6px;line-height:1.1;text-transform:uppercase;letter-spacing:.04em;opacity:.62}
.shared-gif{display:block;width:min(240px,100%);margin:7px 0 2px}.shared-gif>a:first-child{display:block;width:max-content;max-width:100%}.shared-gif .gif-post{margin:0;max-width:240px;max-height:180px}.shared-gif-loading{display:inline-block;padding:8px 10px;border:1px solid var(--border);border-radius:7px;background:#090c10;color:var(--muted);font-size:10px}
.giphy-key-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:7px;align-items:center}
.giphy-key-row input{min-width:0}
@media (max-width:820px){.giphy-picker{position:fixed;left:8px;right:8px;bottom:68px;max-height:62vh}.giphy-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.composer-row-media{grid-template-columns:36px minmax(0,1fr) 58px}
.composer-row-media.has-giphy{grid-template-columns:36px 42px minmax(0,1fr) 58px}}
@media (max-width:520px){.giphy-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.giphy-toolbar{grid-template-columns:minmax(0,1fr) auto}.giphy-toolbar #giphyTrendingBtn{grid-column:1/-1}.giphy-key-row{grid-template-columns:minmax(0,1fr) auto}.giphy-key-row #clearGiphyKeyBtn{grid-column:1/-1;justify-self:start}}


.giphy-cell-provider{position:absolute;top:5px;left:5px;z-index:1;padding:2px 5px;border-radius:5px;background:rgba(4,6,9,.78);border:1px solid rgba(255,255,255,.14);color:#d7dde5;font-size:8px;font-weight:900;letter-spacing:.07em;line-height:1.1;pointer-events:none}.gif-provider-settings-head{margin-top:14px;padding-top:12px;border-top:1px solid rgba(255,255,255,.08);display:flex;align-items:center;justify-content:space-between;gap:10px}


/* iPad/WebKit stability: keep GIF picker paint/layout work isolated from the HLS surface. */
@media (pointer:coarse){
  .giphy-grid{contain:layout paint;}
  .giphy-cell{contain:layout paint;}
}

/* 1.2.0 GIF picker hotfix: no recent-history rows; keep the results pane as the dedicated scroll surface. */
@media(max-width:520px){.giphy-toolbar{grid-template-columns:minmax(0,1fr) auto auto}.giphy-toolbar #giphyTrendingBtn{grid-column:1/-1}.giphy-toolbar #giphyClearSearchBtn{min-width:54px}}

/* Emote-only failure state: avoid silently blank image tiles if an R2 object is
   gone or a browser cannot decode it, without moving the picker controls. */
.emote-image-unavailable{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:36px;height:36px;border:1px dashed #72505b;border-radius:6px;background:#221820;color:#ff9b9b;font-size:17px;font-weight:800;line-height:1}
.emote-autocomplete-item .emote-image-unavailable{width:28px;height:28px;font-size:14px}
.custom-emote-manager-preview .emote-image-unavailable{width:34px;height:34px}
.message .emote-image-unavailable{width:auto;max-width:150px;height:auto;min-height:24px;padding:2px 5px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:11px;font-weight:600}

.emote-cell .emote-image-unavailable{font-size:17px;max-width:none}