/* =====================================================================
   GupShup-X - extras (added on top of style.css, nothing there was changed)
   1. Chat feed anchored to the bottom   2. Offline list   3. @tag chip + mentions
   4. Sound picker   5. Theme button   6. Light theme
   ===================================================================== */

/* ---------- 1. Messages stack from the bottom and move UP as new ones arrive ---------- */
.feed { display: flex; flex-direction: column; overflow-anchor: none; }
.feed > * { flex: none; }
.feed-top { margin-top: auto; }

/* ---------- 2. Offline list (red dot) ---------- */
.list-head {
  display: flex; align-items: center; gap: 8px; padding: 14px 12px 6px;
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--faint);
}
.off-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--danger); box-shadow: 0 0 0 3px rgba(244, 63, 94, .2); }
.user-item.is-offline .status-dot { background: var(--danger); }
.user-item.is-offline .avatar { opacity: .6; }
.user-item.is-offline .user-name { color: var(--muted); }

/* ---------- 3. Tagging ---------- */
.tag-chip {
  display: flex; align-items: center; gap: 10px; margin-bottom: 8px; padding: 6px 6px 6px 8px;
  border-radius: 14px; background: var(--surface-2); border: 1px solid var(--primary);
}
.tag-chip-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; flex: 1; }
.tag-chip-text small { font-size: var(--fs-xs); color: var(--muted); }
.tag-chip-text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tag-chip .tag-x { width: 32px; height: 32px; flex: none; }
.mention { color: #b9a7ff; font-weight: 700; }
.mention.me { background: rgba(124, 92, 255, .28); color: #fff; border-radius: 6px; padding: 0 4px; }
.msg.mention-me { background: rgba(124, 92, 255, .12); border-left: 3px solid var(--primary); border-radius: 10px; padding: 6px 8px; margin-left: -8px; }

/* ---------- 4. Sound picker ---------- */
.set-gap { margin-top: 12px; }
.tone-list { display: flex; flex-wrap: wrap; gap: 8px; }
.tone {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px;
  border: 1px solid var(--border); background: transparent; font-size: var(--fs-sm); font-weight: 600;
}
.tone:hover { background: var(--surface-2); }
.tone.active { background: var(--grad); border-color: transparent; color: #fff; }

/* ---------- 5. Theme button ---------- */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 12px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text); padding: 0;
}
.theme-toggle:hover { background: var(--surface-2); }
.home-links { align-items: center; }

/* ---------- 6. Light theme ---------- */
:root[data-theme="light"] {
  --bg: #f4f6fc;
  --bg-2: #eaeef9;
  --surface: #ffffff;
  --surface-2: #eef1fa;
  --surface-3: #dde3f4;
  --border: #d0d8ee;
  --text: #161b36;
  --muted: #566082;
  --faint: #7f89a9;
  --shadow: 0 12px 32px rgba(40, 52, 100, 0.16);
  color-scheme: light;
}
:root[data-theme="light"] a { color: #5b3fe0; }
:root[data-theme="light"] .msg-text { color: #1f2547; }
:root[data-theme="light"] .msg.own .msg-name { color: #5b3fe0; }
:root[data-theme="light"] .msg.own .msg-text { color: #161b36; }
:root[data-theme="light"] .mention { color: #5b3fe0; }
:root[data-theme="light"] .mention.me { color: #3a22b3; background: rgba(124, 92, 255, .2); }
:root[data-theme="light"] .mute-banner,
:root[data-theme="light"] .sys.notice,
:root[data-theme="light"] .dm-note.info { color: #7a4a00; }
:root[data-theme="light"] .mute-banner strong { color: #5c3500; }
:root[data-theme="light"] .field-error,
:root[data-theme="light"] .dm-note { color: #c81e45; }
:root[data-theme="light"] .btn.danger { color: #c81e45; }
:root[data-theme="light"] .prose p,
:root[data-theme="light"] .prose li,
:root[data-theme="light"] .popup-about { color: #2c3358; }
:root[data-theme="light"] .entry-card { background: rgba(255, 255, 255, .92); }
:root[data-theme="light"] .home-nav { background: rgba(255, 255, 255, .86); }
:root[data-theme="light"] .home-links a:hover { color: var(--primary); }
:root[data-theme="light"] .age-pill { color: #b4143a; }
:root[data-theme="light"] .hb { background: rgba(255, 255, 255, .85); }
:root[data-theme="light"] .hb2 { background: rgba(124, 92, 255, .18); color: #3a22b3; }
:root[data-theme="light"] .f-ico { color: #5b3fe0; }
:root[data-theme="light"] .tag-live { color: #15803d; }
:root[data-theme="light"] .tab.active { color: var(--primary); }
:root[data-theme="light"] .scrim { background: rgba(30, 40, 80, .35); }
:root[data-theme="light"] dialog::backdrop { background: rgba(30, 40, 80, .45); }
:root[data-theme="light"] :focus-visible { outline-color: var(--primary); }
:root[data-theme="light"] .switch input:focus-visible + .slider { outline-color: var(--primary); }
:root[data-theme="light"] .swatch input:checked + .avatar { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--text); }
:root[data-theme="light"] .bubble.them { color: var(--text); }

/* =====================================================================
   7. Admin   8. Pictures & files   9. Viewer   10. Moving the message box / chat window
   ===================================================================== */

/* password box looks like the other boxes */
input[type="password"] {
  width: 100%; background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 11px 14px; outline: none; transition: border-color .15s, box-shadow .15s;
}
input[type="password"]:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(124, 92, 255, .25); }
.entry-admin { margin-top: 10px; text-align: center; font-size: var(--fs-xs); }
.entry-admin a { color: var(--faint); display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.entry-admin a:hover { color: var(--text); text-decoration: underline; }

/* ---------- 7. Admin ---------- */
.admin-btn { color: #fbbf24; }
.admin-btn:hover { color: #fde68a; }
.avatar.is-admin { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px #f59e0b; }
.tag-admin { background: rgba(245, 158, 11, .2); color: #fbbf24; }
.admin-badge {
  display: inline-flex; align-items: center; gap: 4px; align-self: center; padding: 2px 7px; border-radius: 6px;
  font-size: 10px; font-weight: 800; letter-spacing: .06em; color: #fff; background: linear-gradient(135deg, #f59e0b, #ef4444);
}
/* the admin's messages are gold, so nobody can mistake them */
.msg.admin {
  padding: 8px 12px; margin-left: -4px; border-radius: 12px; border: 1px solid rgba(245, 158, 11, .45); border-left: 4px solid #f59e0b;
  background: linear-gradient(90deg, rgba(245, 158, 11, .18), rgba(245, 158, 11, .04));
}
.msg.admin .msg-name { color: #fbbf24; }
.msg.admin .msg-text { color: #fff7e0; font-weight: 500; }
.msg-del {
  margin-left: auto; display: inline-flex; align-items: center; padding: 3px 5px; border: 0; border-radius: 6px;
  background: none; color: var(--faint); opacity: .55; transition: opacity .15s, color .15s, background .15s;
}
.msg:hover .msg-del, .msg-del:focus-visible { opacity: 1; }
.msg-del:hover { color: #ff8da1; background: rgba(244, 63, 94, .14); }
.msg-head { flex-wrap: wrap; }

.ap-list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.ap-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 8px 10px; border-radius: var(--radius); background: var(--bg-2); }
.ap-who { display: flex; flex-direction: column; flex: 1 1 130px; min-width: 0; line-height: 1.2; }
.ap-who strong { overflow-wrap: anywhere; }
.ap-who small { color: var(--muted); font-size: var(--fs-xs); overflow-wrap: anywhere; }
.set-section h3 .chip { margin-left: 6px; vertical-align: 2px; }

.popup-admin { margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; }
.popup-admin-title { display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #fbbf24; }
.popup-admin .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* ---------- 8. Pictures & files ---------- */
.attach-chip {
  position: relative; display: flex; align-items: center; gap: 10px; margin-bottom: 8px; padding: 6px 8px; overflow: hidden;
  border-radius: 14px; background: var(--surface-2); border: 1px solid var(--border);
}
.dm-attach-chip { margin: 0; border-radius: 0; border-width: 1px 0 0; }
.attach-thumb { width: 44px; height: 44px; flex: none; border-radius: 10px; object-fit: cover; background: var(--bg-2); }
.attach-file-ico { display: inline-flex; align-items: center; justify-content: center; color: #b9a7ff; }
.attach-info { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.25; }
.attach-info strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attach-info small { color: var(--muted); font-size: var(--fs-xs); }
.attach-x { width: 32px; height: 32px; flex: none; }
.attach-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--surface-3); }
.attach-bar-fill { display: block; height: 100%; background: var(--grad); transition: width .15s; }

.once-toggle {
  display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 6px 10px; border-radius: 999px;
  border: 1px solid var(--border); background: transparent; color: var(--muted); font-size: var(--fs-xs); font-weight: 700;
}
.once-toggle:hover { background: var(--surface-3); }
.once-toggle.on { background: var(--grad); border-color: transparent; color: #fff; }
.once-badge {
  display: inline-flex; align-items: center; justify-content: center; flex: none; width: 18px; height: 18px; border-radius: 50%;
  border: 2px dashed currentColor; font-size: 10px; font-weight: 800; line-height: 1;
}
.once-badge.big { width: 32px; height: 32px; font-size: 14px; color: var(--primary); }

.att { display: flex; align-items: center; gap: 12px; margin-top: 6px; color: inherit; text-decoration: none; }
.att-img-btn { display: block; margin-top: 6px; padding: 0; border: 0; border-radius: 14px; background: none; overflow: hidden; cursor: zoom-in; max-width: min(320px, 100%); }
.att-img { display: block; max-width: 100%; max-height: 300px; min-width: 80px; min-height: 60px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface-2); }
.att-file { max-width: 340px; padding: 10px 14px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--border); }
.att-file:hover { border-color: var(--primary); }
.att-ico { display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: rgba(124, 92, 255, .16); color: #b9a7ff; }
.att-ico.big { width: 72px; height: 72px; border-radius: 20px; }
.att-file-text, .att-once-text { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.25; text-align: left; }
.att-file-text strong { overflow-wrap: anywhere; }
.att small { color: var(--muted); font-size: var(--fs-xs); }
.att-once {
  width: min(320px, 100%); padding: 10px 14px; border-radius: 14px; border: 1px dashed var(--primary);
  background: rgba(124, 92, 255, .1); font: inherit; text-align: left; cursor: pointer;
}
button.att-once:hover { background: rgba(124, 92, 255, .2); }
button.att-once:disabled { opacity: .6; cursor: wait; }
.att-once.mine, .att-once.done { cursor: default; border-style: solid; border-color: var(--border); background: var(--surface-2); opacity: .85; }
.att-once.done .once-badge, .att-once.mine .once-badge { color: var(--faint); }
.att-note { color: var(--faint); font-size: var(--fs-sm); font-style: italic; }

.bubble .att { margin-top: 0; margin-bottom: 4px; }
.bubble .att-img { max-width: 240px; max-height: 240px; }
.bubble .att-once, .bubble .att-file { width: 100%; }
.bubble.me .att-file { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .35); color: #fff; }
.bubble.me .att-once { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .55); color: #fff; }
.bubble.me .att-once.mine, .bubble.me .att-once.done { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .3); }
.bubble.me .att small, .bubble.me .att-note { color: rgba(255, 255, 255, .8); }
.bubble.me .once-badge.big, .bubble.me .att-ico { color: #fff; }

/* ---------- 9. Picture / view-once viewer ---------- */
.viewer { position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column; background: rgba(3, 5, 12, .94); color: #fff; }
.viewer-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; }
.viewer-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.viewer .icon-btn { color: #fff; }
.viewer .icon-btn:hover { background: rgba(255, 255, 255, .14); }
.viewer-body { flex: 1; min-height: 0; display: grid; place-items: center; padding: 6px 14px; overflow: auto; }
.viewer-img { max-width: 100%; max-height: calc(100dvh - 150px); object-fit: contain; border-radius: 8px; user-select: none; -webkit-user-drag: none; }
.viewer-note { padding: 10px 14px calc(14px + env(safe-area-inset-bottom, 0px)); text-align: center; font-size: var(--fs-sm); color: #fcd9a0; }
.viewer-file { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; overflow-wrap: anywhere; }
.viewer-file .btn { text-decoration: none; }

/* ---------- 10. Moving the private chat window ---------- */
@media (min-width: 901px) {
  .dm-head.drag-handle { cursor: grab; touch-action: none; user-select: none; }
  .dm-panel.dragging .dm-head { cursor: grabbing; }
  .dm-panel.dragging { box-shadow: 0 18px 44px rgba(2, 4, 12, .6); }
}

/* ---------- light theme for the new parts ---------- */
:root[data-theme="light"] .msg.admin .msg-name,
:root[data-theme="light"] .admin-btn,
:root[data-theme="light"] .tag-admin,
:root[data-theme="light"] .popup-admin-title { color: #b45309; }
:root[data-theme="light"] .msg.admin .msg-text { color: #3b2a00; }
:root[data-theme="light"] .att-ico,
:root[data-theme="light"] .attach-file-ico { color: #5b3fe0; }
:root[data-theme="light"] .once-badge.big { color: #5b3fe0; }
:root[data-theme="light"] .avatar.is-admin { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #f59e0b; }
:root[data-theme="light"] .msg-del:hover { color: #c81e45; }