:root{
  color-scheme:dark;
  --bg:#07111f;
  --card:#101d35;
  --card-2:#0b1830;
  --line:#263956;
  --text:#e7eefc;
  --muted:#a8b4c7;
  --brand:#60a5fa;
  --brand-strong:#2563eb;
  --bad:#f97066;
  --good:#32d583;
  --notice-bg:#0b2a4a;
  --notice-line:#225b91;
  --error-bg:#3b1215;
  --success-bg:#063d2a;
  --input-bg:#0b1830;
  --message-bg:#13243d;
  --emoji-bg:#172a46;
  --avatar-bg:#1e3a8a;
  --avatar-text:#dbeafe;
  --shadow:0 8px 22px rgba(0,0,0,.28);
  --chat-logo-overlay:rgba(11,24,48,.88);
}
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#f4f6fb;
  --card:#fff;
  --card-2:#fbfcff;
  --line:#dfe4ee;
  --text:#182033;
  --muted:#657084;
  --brand:#1d4ed8;
  --brand-strong:#1d4ed8;
  --bad:#b42318;
  --good:#067647;
  --notice-bg:#eef4ff;
  --notice-line:#c9dbff;
  --error-bg:#fff1f0;
  --success-bg:#ecfdf3;
  --input-bg:#fff;
  --message-bg:#fff;
  --emoji-bg:#f1f5f9;
  --avatar-bg:#dbeafe;
  --avatar-text:#1e40af;
  --shadow:0 8px 22px rgba(18,26,44,.06);
  --chat-logo-overlay:rgba(251,252,255,.88);
}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--text)}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
.chat-shell{max-width:1200px;margin:0 auto;padding:18px}
.chat-header{display:flex;justify-content:space-between;gap:16px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:18px 20px;margin-bottom:12px;box-shadow:var(--shadow)}
.chat-header h1{margin:0;font-size:24px}
.chat-header p{margin:4px 0 0;color:var(--muted)}

.room-badge{display:inline-flex;align-items:center;vertical-align:middle;margin-left:8px;padding:3px 8px;border:1px solid var(--line);border-radius:999px;background:var(--card-2);color:var(--muted);font-size:12px;font-weight:700;line-height:1.2;white-space:nowrap}
.chat-header nav{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.room-notice,.alert{background:var(--notice-bg);border:1px solid var(--notice-line);border-radius:14px;padding:12px 14px;margin-bottom:12px}

.stream-player{display:flex;align-items:center;justify-content:space-between;gap:14px;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:12px 14px;margin-bottom:12px;box-shadow:var(--shadow)}
.stream-player-text{display:flex;flex-direction:column;gap:2px;min-width:180px}
.stream-player-text strong{font-size:15px;color:var(--text)}
.stream-player-text span{font-size:13px;color:var(--muted)}
.stream-player audio{width:min(100%,440px);height:38px;display:block;filter:drop-shadow(0 2px 4px rgba(0,0,0,.15))}
.alert.error,.chat-status.error{background:var(--error-bg);color:var(--bad);border-color:color-mix(in srgb,var(--bad) 35%,var(--line))}
.alert.success{background:var(--success-bg);color:var(--good);border-color:color-mix(in srgb,var(--good) 35%,var(--line))}
.chat-layout{display:grid;grid-template-columns:280px 1fr;gap:14px}
.chat-sidebar,.chat-main,.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:16px;box-shadow:var(--shadow)}
.chat-main{display:flex;flex-direction:column;min-height:650px}
.messages{height:520px;overflow-y:auto;padding:8px;border:1px solid var(--line);border-radius:14px;background:linear-gradient(var(--chat-logo-overlay),var(--chat-logo-overlay)),url('https://safehouseradio.co.uk/wp-content/uploads/2024/01/logo-2.png'),var(--card-2);background-position:center,center,center;background-repeat:no-repeat,no-repeat,no-repeat;background-size:auto,min(52%,380px) auto,auto;background-attachment:scroll,scroll,scroll}
.message{display:flex;gap:10px;margin:10px 0}
.message.system .message-text{font-style:italic;color:var(--muted)}
.message-body{max-width:calc(100% - 54px)}
.message-meta{font-size:13px;color:var(--muted);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.message-meta strong{color:var(--text)}
.message-text{background:var(--message-bg);border:1px solid var(--line);border-radius:14px;padding:10px 12px;margin-top:4px;line-height:1.45;word-break:break-word}
.chat-avatar{width:42px;height:42px;border-radius:50%;object-fit:cover;flex:0 0 auto;border:1px solid var(--line)}
.chat-avatar-initials{display:inline-flex;align-items:center;justify-content:center;background:var(--avatar-bg);color:var(--avatar-text);font-weight:700}
.me{display:flex;align-items:center;gap:10px;margin-bottom:16px;flex-wrap:wrap}
.me span{color:var(--muted);font-size:13px}
.online-user{display:flex;align-items:center;gap:8px;margin:8px 0}
.online-user .chat-avatar{width:28px;height:28px}
.send-form{margin-top:12px;display:grid;grid-template-columns:1fr auto;gap:10px}
.emoji-bar{grid-column:1 / -1;display:flex;gap:6px;flex-wrap:wrap}
.emoji-bar button{background:var(--emoji-bg);color:var(--text);border:1px solid var(--line);border-radius:10px;padding:5px 8px;cursor:pointer}
textarea,input,select{width:100%;border:1px solid var(--line);border-radius:12px;padding:10px 12px;font:inherit;background:var(--input-bg);color:var(--text)}
textarea{min-height:76px;resize:vertical}
textarea::placeholder,input::placeholder{color:var(--muted)}
button{background:var(--brand-strong);color:#fff;border:0;border-radius:12px;padding:10px 16px;font-weight:700;cursor:pointer}
button:disabled,textarea:disabled,input:disabled,select:disabled{opacity:.55;cursor:not-allowed}
.chat-status{margin-top:8px;padding:8px;border-radius:10px;color:var(--muted)}
.muted{color:var(--muted)}
.chat-auth-page{padding:24px}
.auth-wrap{max-width:1120px;margin:0 auto}
.auth-wrap.narrow{max-width:520px}
.auth-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.card h2{margin-top:0}
.card label{display:block;margin:12px 0;font-weight:600}
.card label input,.card label textarea,.card label select{margin-top:6px;font-weight:400}
.profile-avatar{margin-bottom:12px}
.profile-avatar .chat-avatar{width:72px;height:72px}
.admin-table{width:100%;border-collapse:collapse;background:var(--card);border-radius:14px;overflow:hidden}
.admin-table th,.admin-table td{border-bottom:1px solid var(--line);padding:10px;text-align:left}
.admin-table th{background:var(--card-2)}
.admin-actions{display:flex;gap:8px;flex-wrap:wrap}
.admin-grid{display:grid;grid-template-columns:260px 1fr;gap:16px}
.admin-nav a{display:block;padding:9px 0}
.theme-toggle{position:fixed;right:18px;bottom:18px;z-index:9999;background:var(--card);color:var(--text);border:1px solid var(--line);box-shadow:var(--shadow);border-radius:999px;padding:9px 14px;font-size:13px}
.theme-toggle:hover{background:var(--card-2)}
.site-credit{max-width:1200px;margin:14px auto 6px;padding:8px 12px;text-align:center;color:var(--muted);font-size:13px}
.chat-shell .site-credit{margin-bottom:0}

@media(max-width:850px){
  .chat-shell{padding:12px;max-width:100%}
  .chat-layout,.auth-grid,.admin-grid{grid-template-columns:1fr;gap:12px}
  .chat-header{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:14px 16px;border-radius:16px}
  .chat-header h1{font-size:22px;line-height:1.2}
  .chat-header nav{width:100%;gap:8px}
  .chat-header nav a{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:999px;padding:7px 10px;background:var(--card-2);font-size:14px}
  .stream-player{flex-direction:column;align-items:stretch;gap:10px;padding:12px;border-radius:16px}
  .stream-player-text{min-width:0;text-align:center}
  .stream-player audio{width:100%}
  .chat-sidebar{order:1;padding:12px;border-radius:16px}
  .chat-main{order:2;min-height:0;padding:12px;border-radius:16px}
  .chat-sidebar h3{margin:12px 0 6px}
  .chat-sidebar #online-users{max-height:180px;overflow-y:auto;padding-right:4px;border:1px solid var(--line);border-radius:12px;background:var(--card-2);padding:6px}
  .chat-sidebar #typing-users{min-height:22px;border:1px solid var(--line);border-radius:12px;background:var(--card-2);padding:8px 10px}
  .me{margin-bottom:12px}
  .messages{height:48vh;min-height:320px;padding:8px;background-size:auto,min(72%,300px) auto,auto}
  .message{gap:8px;margin:8px 0}
  .message-body{max-width:calc(100% - 46px)}
  .message-meta{font-size:12px;gap:6px}
  .message-text{font-size:15px;padding:9px 10px;border-radius:12px}
  .chat-avatar{width:36px;height:36px}
  .send-form{grid-template-columns:1fr;gap:8px;margin-top:10px}
  .send-form textarea{min-height:72px}
  .send-form > button{width:100%;padding:12px 16px}
  .emoji-bar{display:flex;flex-direction:row;align-items:center;gap:6px;overflow-x:auto;flex-wrap:nowrap;padding:2px 0 6px;-webkit-overflow-scrolling:touch}
  .emoji-bar button{flex:0 0 auto;width:auto;min-width:38px;padding:7px 9px;line-height:1;font-size:18px}
  .theme-toggle{right:12px;bottom:12px}
}
@media(max-width:520px){
  .chat-shell,.chat-auth-page{padding:8px}
  .chat-header,.chat-sidebar,.chat-main,.card{border-radius:14px}
  .chat-header h1{font-size:20px}
  .chat-header p{font-size:14px}
  .messages{height:44vh;min-height:280px;border-radius:12px;background-size:auto,min(78%,250px) auto,auto}
  .room-notice,.alert{padding:10px 12px;border-radius:12px}
  .stream-player{border-radius:14px;padding:10px}
  .stream-player-text strong{font-size:14px}
  .stream-player-text span{font-size:12px}
  textarea,input,select{font-size:16px;padding:10px}
  .admin-table{display:block;overflow-x:auto;white-space:nowrap}
  .theme-toggle{font-size:12px;padding:8px 11px}
}

/* Admin destructive actions */
.danger-zone{border-color:rgba(239,68,68,.35)}
.danger-button{background:#dc2626;color:#fff}
.danger-button:hover{filter:brightness(1.05)}

/* Condensed intro page */
.intro-wrap{max-width:760px}
.intro-hero{text-align:center;margin-bottom:14px;padding:22px}
.intro-hero h1{margin:0 0 8px;font-size:30px}
.intro-hero p{max-width:620px;margin:0 auto 16px;color:var(--muted);line-height:1.5}
.intro-choice-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px}
.intro-choice{background:var(--card-2);color:var(--text);border:1px solid var(--line);box-shadow:none}
.intro-choice:hover,.intro-choice.is-active{background:var(--brand-strong);border-color:var(--brand-strong);color:#fff;text-decoration:none}
.intro-panels{max-width:560px;margin:0 auto}
.intro-panel{animation:introPanelIn .16s ease-out}
.intro-panel h2{margin:0 0 6px}
.stacked-form{margin-top:14px}
.stacked-form button{width:100%;margin-top:4px;padding:12px 16px}
@keyframes introPanelIn{from{opacity:.2;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}

@media(max-width:620px){
  .intro-wrap{max-width:100%}
  .intro-hero{padding:16px;text-align:left}
  .intro-hero h1{font-size:24px}
  .intro-hero p{font-size:14px;margin-left:0;margin-right:0}
  .intro-choice-row{grid-template-columns:1fr;gap:8px}
  .intro-choice{width:100%;padding:12px 14px}
  .intro-panels{max-width:100%}
}

/* Replies and reactions */
.reply-preview{display:block;width:100%;text-align:left;background:var(--card-2);color:var(--muted);border:1px solid var(--line);border-left:3px solid var(--brand);border-radius:10px;padding:7px 9px;margin:6px 0 4px;box-shadow:none;font-weight:400}
.reply-preview span{display:block;color:var(--text);font-size:12px;font-weight:700;margin-bottom:2px}
.reply-preview em{display:block;font-style:normal;font-size:12px;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.reply-box{grid-column:1 / -1;display:flex;justify-content:space-between;align-items:center;gap:10px;background:var(--card-2);border:1px solid var(--line);border-left:3px solid var(--brand);border-radius:12px;padding:9px 10px}
.reply-box[hidden]{display:none}
.reply-box strong{font-size:13px;color:var(--text)}
.reply-box p{margin:3px 0 0;color:var(--muted);font-size:13px;line-height:1.35;max-height:38px;overflow:hidden}
.ghost-button{background:transparent;color:var(--muted);border:1px solid var(--line);padding:7px 10px;box-shadow:none}
.ghost-button:hover{background:var(--card);color:var(--text)}
.message-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:6px}
.reply-action{background:transparent;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:4px 9px;font-size:12px;box-shadow:none}
.reply-action:hover{background:var(--card-2);color:var(--text)}
.reaction-picker{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.reaction-pick,.reaction-count{background:var(--emoji-bg);color:var(--text);border:1px solid var(--line);border-radius:999px;padding:4px 7px;line-height:1;box-shadow:none;font-size:14px}
.reaction-pick:hover,.reaction-count:hover{filter:brightness(1.08)}
.message-reactions{display:flex;gap:5px;flex-wrap:wrap;margin-top:6px;min-height:0}
.reaction-count{display:inline-flex;align-items:center;gap:4px;color:var(--muted)}
.reaction-count strong{font-size:12px;color:inherit}
.reaction-count.is-mine{border-color:var(--brand);color:var(--brand);background:color-mix(in srgb,var(--brand) 12%,var(--emoji-bg))}
.message-highlight .message-text,.message.reply-target .message-text{outline:2px solid var(--brand);outline-offset:2px}
.message.reply-target{border-color:rgba(56,189,248,.35)}
.reply-box.is-active{box-shadow:0 0 0 2px rgba(56,189,248,.15)}

@media(max-width:850px){
  .reply-box{align-items:flex-start;flex-direction:column;gap:8px}
  .reply-box .ghost-button{width:100%}
  .message-actions{gap:6px}
  .reaction-picker{overflow-x:auto;flex-wrap:nowrap;max-width:100%;padding-bottom:2px;-webkit-overflow-scrolling:touch}
  .reaction-pick,.reaction-count{flex:0 0 auto;font-size:15px;padding:5px 8px}
  .reply-preview em{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
}


/* Iframe embed mode */
.chat-embed-html,
.chat-embed-mode {
  min-height: 0;
}
.chat-embed-mode {
  overflow-x: hidden;
}
.chat-embed-mode .chat-shell {
  padding: 12px;
}
.chat-embed-mode.chat-auth-page {
  padding: 12px;
}
.chat-embed-mode .site-credit {
  margin-bottom: 10px;
}
@media(max-width:850px){
  .chat-embed-mode .chat-shell,
  .chat-embed-mode.chat-auth-page {
    padding: 8px;
  }
}

/* Mobile iframe improvements: keep the staff/user panel visible and avoid nested cut-offs. */
@media(max-width:850px){
  .chat-embed-mode .chat-layout{align-items:start}
  .chat-embed-mode .chat-sidebar{position:relative;top:auto}
  .chat-embed-mode .chat-main{min-height:0}
  .chat-embed-mode .messages{height:46svh;min-height:300px;max-height:520px}
}
@media(max-width:520px){
  .chat-embed-mode .messages{height:42svh;min-height:270px;max-height:460px}
  .chat-embed-mode .chat-sidebar #online-users{max-height:150px}
}

/* GIPHY GIF support */
.gif-toggle{font-weight:800;letter-spacing:.02em}
.gif-panel{grid-column:1 / -1;background:var(--card-2);border:1px solid var(--line);border-radius:14px;padding:10px;box-shadow:inset 0 1px 0 rgba(255,255,255,.03)}
.gif-search-row{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center;margin-bottom:8px}
.gif-search-row input{margin:0}
.gif-status{font-size:13px;margin:4px 0 8px}
.gif-status.error{color:var(--bad)}
.gif-results{display:grid;grid-template-columns:repeat(auto-fill,minmax(116px,1fr));gap:8px;max-height:310px;overflow:auto;padding-right:2px}
.gif-result{display:flex;flex-direction:column;gap:5px;padding:6px;background:var(--card);border:1px solid var(--line);border-radius:12px;color:var(--text);box-shadow:none;min-width:0;text-align:left}
.gif-result:hover{border-color:var(--brand);filter:none;transform:translateY(-1px)}
.gif-result img{display:block;width:100%;height:88px;object-fit:cover;border-radius:9px;background:var(--input-bg)}
.gif-result span{display:block;font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.selected-gif{grid-column:1 / -1;display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;background:var(--card-2);border:1px solid var(--line);border-left:3px solid var(--brand);border-radius:12px;padding:8px 10px}
.selected-gif[hidden]{display:none}
.selected-gif strong{display:block;font-size:13px;color:var(--text)}
.selected-gif span{display:block;color:var(--muted);font-size:12px;max-width:420px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.selected-gif img{width:64px;height:44px;object-fit:cover;border-radius:8px;border:1px solid var(--line)}
.message-gif{margin-top:6px;max-width:min(360px,100%)}
.message-gif .chat-gif{display:block;max-width:100%;max-height:320px;border-radius:14px;border:1px solid var(--line);background:var(--card-2)}
.gif-credit{font-size:11px;color:var(--muted);margin-top:3px;text-align:right}
.gif-credit a{color:var(--muted)}

@media(max-width:850px){
  .gif-search-row{grid-template-columns:1fr;gap:7px}
  .gif-search-row button{width:100%}
  .gif-results{grid-template-columns:repeat(2,minmax(0,1fr));max-height:260px}
  .selected-gif{grid-template-columns:1fr auto;align-items:start}
  .selected-gif .ghost-button{grid-column:1 / -1;width:100%}
  .message-gif{max-width:100%}
  .message-gif .chat-gif{max-height:260px}
}

.message-gif .gif-fallback {
  display: none;
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(0,0,0,.16);
  font-size: 13px;
}

.message-gif.gif-broken .chat-gif {
  display: none;
}

.message-gif.gif-broken .gif-fallback {
  display: block;
}

/* Provider GIF embeds for Tenor/GIPHY share links */
.message-gif-embed{width:min(360px,100%)}
.chat-gif-embed{display:block;width:100%;height:360px;max-height:52vh;border:1px solid var(--line);border-radius:14px;background:var(--card-2);overflow:hidden}
.chat-gif-embed-giphy{height:320px}
@media(max-width:850px){
  .message-gif-embed{width:100%}
  .chat-gif-embed{height:300px;max-height:46vh}
}
@media(max-width:520px){
  .chat-gif-embed{height:260px;max-height:42vh}
}