/*
   EGW Online Service — Aurora Light chat theme  (v2.1.161)
   ------------------------------------------------------------------
   A complete visual redesign of the live chat surface: a bright,
   airy white panel with deep-navy ink and a warm coral accent.
   Loaded AFTER chat.css + chat-studio.css so it overrides cleanly.
   Everything is scoped to the chat side-panel so the rest of the
   immersive (dark) watch experience is untouched.
   ------------------------------------------------------------------ */

/* ===== 1. Scoped design tokens ===================================== */
.eos-side-panel[data-eos-panel="chat"],
.eos-chat {
  --au-coral:        #E0533D;
  --au-coral-press:  #C53D28;
  --au-coral-soft:   #FCEBE7;
  --au-coral-ink:    #99311C;
  --au-navy:         #122948;
  --au-navy-700:     #1B3A5C;
  --au-ink:          #20364F;
  --au-ink-mut:      #5C7088;
  --au-ink-sub:      #8497AC;
  --au-surface:      #FFFFFF;
  --au-surface-2:    #F5F8FC;
  --au-surface-3:    #ECF1F8;
  --au-line:         #E2E9F1;
  --au-line-2:       #D3DEEA;
  --au-radius:       16px;
  --au-radius-sm:    11px;
  --au-shadow:       0 1px 2px rgba(18,41,72,.06), 0 8px 24px rgba(18,41,72,.07);
  --au-shadow-sm:    0 2px 8px rgba(18,41,72,.10);
}

/* ===== 2. Panel shell ============================================== */
.eos-side-panel[data-eos-panel="chat"] {
  background: var(--au-surface) !important;
  border: 1px solid var(--au-line) !important;
  border-radius: var(--au-radius) !important;
  box-shadow: var(--au-shadow);
  overflow: hidden;
}
.eos-chat {
  background: var(--au-surface) !important;
  color: var(--au-ink);
}

/* Utility lane (mode toggle + pills) */
.eos-chat-utility-lane {
  background: var(--au-surface-2);
  border-bottom: 1px solid var(--au-line);
  padding: 8px 10px;
  gap: 6px;
}
.eos-chat-mode {
  background: var(--au-surface-3);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
}
.eos-chat-mode-btn {
  color: var(--au-ink-mut);
  border-radius: 999px !important;
  font-weight: 500;
  transition: all .18s ease;
}
.eos-chat-mode-btn.is-on {
  background: var(--au-surface) !important;
  color: var(--au-navy) !important;
  box-shadow: var(--au-shadow-sm);
}
.eos-chat-util-ico,
.eos-chat-util-pill,
.eos-chat-bm-toggle,
.eos-chat-search-toggle,
.eos-chat-langpill {
  background: var(--au-surface) !important;
  border: 1px solid var(--au-line-2) !important;
  color: var(--au-ink-mut) !important;
  border-radius: 999px !important;
  transition: all .15s ease;
}
.eos-chat-util-ico:hover,
.eos-chat-bm-toggle:hover,
.eos-chat-search-toggle:hover,
.eos-chat-langpill:hover {
  color: var(--au-coral) !important;
  border-color: var(--au-coral) !important;
  transform: translateY(-1px);
}

/* ===== 3. Message stream =========================================== */
.eos-chat-stream {
  background: var(--au-surface);
  padding: 8px 6px 10px;
  scroll-behavior: smooth;
}
.eos-chat-stream::-webkit-scrollbar { width: 8px; }
.eos-chat-stream::-webkit-scrollbar-thumb {
  background: var(--au-line-2); border-radius: 99px;
}
.eos-chat-stream::-webkit-scrollbar-thumb:hover { background: var(--au-ink-sub); }

/* One message row */
.eos-chat-msg {
  position: relative;
  display: flex;
  gap: 10px;
  padding: 7px 10px 7px 8px !important;
  border-radius: 12px;
  margin: 1px 2px;
  transition: background .14s ease;
  animation: auMsgIn .26s cubic-bezier(.2,.7,.3,1);
}
@keyframes auMsgIn { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
.eos-chat-msg:hover { background: var(--au-surface-2); }

/* Continuation (same sender, <5min) — tuck under, hide avatar */
.eos-chat-msg.is-continuation { margin-top: -3px; padding-top: 2px !important; }
.eos-chat-msg.is-continuation .eos-chat-msg__avatar { visibility: hidden; height: 0; }
.eos-chat-msg.is-continuation .who { display: none; }

/* Avatar */
.eos-chat-msg__avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  flex: none;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Jost', sans-serif;
  font-weight: 600; font-size: 13px;
  color: #fff;
  background: var(--au-navy-700);
  box-shadow: 0 0 0 2px var(--au-surface), 0 1px 3px rgba(18,41,72,.18);
  object-fit: cover;
}

.eos-chat-msg__body { min-width: 0; flex: 1; }
.eos-chat-msg .who {
  font-weight: 600; font-size: 13.5px;
  margin-right: 7px;
  letter-spacing: .1px;
}
.eos-chat-msg .body { color: var(--au-ink); }
.eos-chat-msg__text {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--au-ink);
  word-break: break-word;
}
.eos-chat-msg .time {
  font-size: 10.5px;
  color: var(--au-ink-sub);
  margin-left: 6px;
}

/* My own messages — soft coral tint card */
.eos-chat-msg.is-mine { background: linear-gradient(0deg, var(--au-coral-soft), var(--au-coral-soft)); }
.eos-chat-msg.is-mine:hover { background: #FBE3DD; }

/* Mentioned-you highlight */
.eos-chat-msg--mentioned-me {
  background: #FFF7E8 !important;
  box-shadow: inset 3px 0 0 #F5A312;
}
.eos-chat-youpill {
  background: #F5A312; color: #3a2a00;
  font-size: 9px; font-weight: 700; letter-spacing: .4px;
  padding: 1px 6px; border-radius: 99px; margin-right: 5px;
  vertical-align: middle;
}

/* Links + mentions inside text */
.eos-chat-msg__text a { color: var(--au-coral); text-decoration: none; font-weight: 500; }
.eos-chat-msg__text a:hover { text-decoration: underline; }
.eos-chat-mention {
  color: var(--au-coral-ink);
  background: var(--au-coral-soft);
  padding: 0 5px; border-radius: 5px; font-weight: 600;
}

/* Quoted reply strip */
.eos-chat-quoted {
  border-left: 2.5px solid var(--au-coral);
  background: var(--au-surface-2);
  border-radius: 0 8px 8px 0;
  padding: 4px 9px; margin: 3px 0 5px;
  cursor: pointer; transition: background .14s;
  display: flex; flex-direction: column; gap: 1px;
}
.eos-chat-quoted:hover { background: var(--au-surface-3); }
.eos-chat-quoted__w { font-size: 11.5px; font-weight: 600; color: var(--au-coral-ink); }
.eos-chat-quoted__t { font-size: 12px; color: var(--au-ink-mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eos-chat-quoted--tomb { border-left-color: var(--au-line-2); opacity: .75; }

.eos-chat-edited { font-size: 10px; color: var(--au-ink-sub); margin-right: 4px; font-style: italic; }

/* Pinned badge inline */
.eos-chat-pin-badge {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 9px; font-weight: 700; letter-spacing: .3px;
  color: var(--au-coral-ink); background: var(--au-coral-soft);
  padding: 1px 6px; border-radius: 99px; margin-right: 5px;
}
.eos-chat-msg--pinned { box-shadow: inset 3px 0 0 var(--au-coral); }

/* ===== 4. Reactions ================================================ */
/* Pills under message */
.eos-chat-msg__pills { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.eos-chat-pill {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--au-surface);
  border: 1px solid var(--au-line-2) !important;
  border-radius: 99px;
  padding: 2px 9px 2px 7px;
  font-size: 12.5px; cursor: pointer;
  transition: transform .12s ease, border-color .12s, background .12s;
}
.eos-chat-pill:hover { border-color: var(--au-coral) !important; transform: translateY(-1px); }
.eos-chat-pill.is-mine { background: var(--au-coral-soft); border-color: var(--au-coral) !important; }
.eos-chat-pill__c { font-size: 11px; font-weight: 600; color: var(--au-ink-mut); }
.eos-chat-pill.is-mine .eos-chat-pill__c { color: var(--au-coral-ink); }
.eos-chat-pill.au-bump { animation: auPillBump .32s cubic-bezier(.3,1.4,.5,1); }
@keyframes auPillBump { 0%{transform:scale(1);} 40%{transform:scale(1.28);} 100%{transform:scale(1);} }

/* Hover quick-reaction bar */
.eos-chat-react-bar {
  position: absolute; top: -16px; right: 12px;
  display: none; gap: 1px;
  background: var(--au-surface);
  border: 1px solid var(--au-line-2);
  border-radius: 99px;
  padding: 3px;
  box-shadow: var(--au-shadow-sm);
  z-index: 5;
}
.eos-chat-msg:hover .eos-chat-react-bar { display: flex; animation: auBarIn .16s ease; }
@keyframes auBarIn { from { opacity:0; transform: translateY(3px) scale(.96);} to {opacity:1; transform:none;} }
.eos-chat-react-q, .eos-chat-react-more {
  width: 28px; height: 28px;
  border: none; background: transparent;
  border-radius: 50%; cursor: pointer;
  font-size: 15px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: transform .12s ease, background .12s;
}
.eos-chat-react-q:hover { background: var(--au-surface-3); transform: scale(1.32); }
.eos-chat-react-more { color: var(--au-ink-mut); font-size: 17px; font-weight: 600; }
.eos-chat-react-more:hover { background: var(--au-coral-soft); color: var(--au-coral); }

/* Reaction fly-up animation (added by chat-upgrade.js) */
.au-react-fly {
  position: fixed; z-index: 9999; pointer-events: none;
  font-size: 22px; animation: auFly .7s ease-out forwards;
}
@keyframes auFly { 0%{opacity:1; transform: translateY(0) scale(.6);} 60%{opacity:1;} 100%{opacity:0; transform: translateY(-46px) scale(1.5);} }

/* ===== 5. Action row =============================================== */
.eos-chat-actions {
  position: absolute; top: -16px; right: 12px;
  display: none; gap: 1px;
  background: var(--au-surface);
  border: 1px solid var(--au-line-2);
  border-radius: 99px;
  padding: 2px;
  box-shadow: var(--au-shadow-sm);
  z-index: 6;
}
/* Show actions when not hovering reactions: stack actions slightly left of react bar */
.eos-chat-msg:hover .eos-chat-actions { display: flex; right: 12px; top: -16px; }
.eos-chat-msg:hover .eos-chat-react-bar { right: auto; left: 12px; }
.eos-chat-action {
  border: none; background: transparent;
  color: var(--au-ink-mut);
  width: 28px; height: 28px;
  border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .12s ease;
}
.eos-chat-action span { display: none; }
.eos-chat-action:hover { background: var(--au-surface-3); color: var(--au-navy); transform: translateY(-1px); }
.eos-chat-action--delete:hover { background: #FCEBEB; color: #C0392B; }
.eos-chat-action--pin:hover, .eos-chat-action--bookmark:hover { background: var(--au-coral-soft); color: var(--au-coral); }

/* ===== 6. Composer ================================================= */
.eos-chat-form {
  background: var(--au-surface);
  border-top: 1px solid var(--au-line);
  padding: 10px 11px;
  gap: 7px;
  align-items: flex-end;
}
.eos-chat-emoji-btn, .au-attach-btn, .au-gif-btn {
  width: 36px; height: 36px; flex: none;
  border: none; background: transparent;
  color: var(--au-ink-mut);
  border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .14s ease;
}
.eos-chat-emoji-btn:hover, .au-attach-btn:hover, .au-gif-btn:hover {
  background: var(--au-surface-3); color: var(--au-coral); transform: translateY(-1px);
}
.eos-chat-input {
  flex: 1; min-height: 22px; max-height: 110px; overflow-y: auto;
  background: var(--au-surface-2) !important;
  border: 1.5px solid var(--au-line-2) !important;
  border-radius: 20px !important;
  padding: 9px 14px !important;
  font-size: 14.5px; line-height: 1.45;
  color: var(--au-ink) !important;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.eos-chat-input:focus {
  outline: none;
  background: var(--au-surface) !important;
  border-color: var(--au-coral) !important;
  box-shadow: 0 0 0 4px var(--au-coral-soft) !important;
}
.eos-chat-input:empty:before { content: attr(data-placeholder); color: var(--au-ink-sub); }
.eos-chat-send {
  width: 40px; height: 40px; flex: none;
  border: none; border-radius: 50%;
  background: var(--au-coral) !important;
  color: #fff !important;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(224,83,61,.34);
  transition: transform .12s ease, background .14s, box-shadow .14s;
}
.eos-chat-send:hover { background: var(--au-coral-press) !important; transform: translateY(-1px) scale(1.04); }
.eos-chat-send:active { transform: scale(.9); }

/* Reply preview above composer */
.eos-chat-reply-preview {
  display: flex; align-items: center; gap: 9px;
  background: var(--au-surface-2);
  border-top: 1px solid var(--au-line);
  border-left: 3px solid var(--au-coral);
  padding: 8px 12px;
}
.eos-chat-reply-preview__w { font-size: 12px; font-weight: 600; color: var(--au-coral-ink); display: block; }
.eos-chat-reply-preview__t { font-size: 12px; color: var(--au-ink-mut); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eos-chat-reply-preview__x {
  margin-left: auto; border: none; background: transparent;
  color: var(--au-ink-mut); font-size: 18px; cursor: pointer;
  width: 26px; height: 26px; border-radius: 50%;
}
.eos-chat-reply-preview__x:hover { background: var(--au-surface-3); color: var(--au-coral); }

.eos-chat-signin {
  background: var(--au-surface-2);
  border-top: 1px solid var(--au-line);
  color: var(--au-ink-mut);
}
.eos-chat-signin a { color: var(--au-coral); font-weight: 600; }

/* ===== 7. Typing indicator ========================================= */
.eos-chat-typing { padding: 2px 16px 6px; color: var(--au-ink-mut); font-size: 12px; }
.eos-chat-typing__dots span { background: var(--au-coral) !important; }

/* ===== 8. Banners & cards (pin / scripture / poll / Q&A / flow) ===== */
.eos-chat-pin {
  background: var(--au-coral-soft);
  border-bottom: 1px solid var(--au-line);
  color: var(--au-coral-ink);
}
.eos-chat-pin__ico { color: var(--au-coral); }
.eos-chat-pin__lbl { color: var(--au-coral-ink); font-weight: 600; }
.eos-chat-pin__txt { color: var(--au-ink); }

.eos-ps-card, .eos-sf-card, .eos-wf-card, .eos-ann-bar {
  background: var(--au-surface-2) !important;
  border: 1px solid var(--au-line) !important;
  border-radius: var(--au-radius-sm) !important;
  color: var(--au-ink) !important;
}
.eos-ps-ico, .eos-ps-lbl, .eos-sf-head__lbl { color: var(--au-coral) !important; }
.eos-ps-text { color: var(--au-ink) !important; }
.eos-ps-ref { color: var(--au-ink-mut) !important; }
.eos-ps-cta, .eos-ps-foot a { color: var(--au-coral) !important; }
.eos-sf-step.is-now .eos-sf-step__dot { background: var(--au-coral) !important; color: #fff !important; }
.eos-sf-head__live { background: #C0392B !important; color: #fff !important; }

/* Quick-reply chips */
.eos-qr-row { padding: 6px 10px; gap: 6px; }
.eos-qr-chip {
  background: var(--au-surface) !important;
  border: 1px solid var(--au-line-2) !important;
  color: var(--au-ink-mut) !important;
  border-radius: 99px !important;
  font-size: 12.5px;
  transition: all .14s ease;
}
.eos-qr-chip:hover { border-color: var(--au-coral) !important; color: var(--au-coral) !important; transform: translateY(-1px); }

/* Give button */
.eos-tg-give-btn {
  background: var(--au-coral) !important;
  color: #fff !important;
  border-radius: 99px !important;
  box-shadow: 0 2px 10px rgba(224,83,61,.3);
}
.eos-tg-give-btn:hover { background: var(--au-coral-press) !important; }

/* Poll messages */
.eos-chat-poll, .eos-chat-msg .eos-chat-poll {
  background: var(--au-surface-2) !important;
  border: 1px solid var(--au-line) !important;
  border-radius: var(--au-radius-sm) !important;
}
.eos-chat-poll__opt, .eos-poll-opt {
  background: var(--au-surface) !important;
  border: 1px solid var(--au-line-2) !important;
}
.eos-chat-poll__fill, .eos-poll-opt__fill { background: var(--au-coral-soft) !important; }
.eos-chat-poll__pct { color: var(--au-coral-ink) !important; }

/* Q&A rail */
.eos-chat-qa { background: var(--au-surface-2) !important; border-bottom: 1px solid var(--au-line) !important; }
.eos-chat-qa *  { color: var(--au-ink); }
.eos-chat-qa__upvote.is-on { color: var(--au-coral) !important; }

/* Slow-mode bar */
.eos-chat-slowbar { background: #FFF7E8 !important; color: #8A5A00 !important; border-bottom: 1px solid #F5E2B8 !important; }

/* Presence "who's here" */
.eos-chat-pr { background: var(--au-surface-2) !important; border-bottom: 1px solid var(--au-line) !important; color: var(--au-ink-mut) !important; }

/* Search panel */
.eos-chat-search { background: var(--au-surface) !important; border-bottom: 1px solid var(--au-line) !important; }
.eos-chat-search input { background: var(--au-surface-2) !important; border: 1px solid var(--au-line-2) !important; color: var(--au-ink) !important; border-radius: 10px !important; }

/* Bookmarks panel */
.eos-chat-bm-panel { background: var(--au-surface) !important; border: 1px solid var(--au-line) !important; box-shadow: var(--au-shadow); }

/* Emoji / GIF picker (shared element) */
.eos-chat-picker, .au-gif-pop {
  background: var(--au-surface) !important;
  border: 1px solid var(--au-line-2) !important;
  border-radius: 14px !important;
  box-shadow: var(--au-shadow) !important;
}
.eos-chat-picker__search { background: var(--au-surface-2) !important; border: 1px solid var(--au-line-2) !important; color: var(--au-ink) !important; border-radius: 9px !important; }
.eos-chat-picker__tabs button { color: var(--au-ink-mut) !important; }
.eos-chat-picker__tabs button.is-on { color: var(--au-coral) !important; border-bottom: 2px solid var(--au-coral) !important; }
.eos-chat-picker__grid button:hover { background: var(--au-surface-3) !important; }

/* Tombstone (deleted) */
.eos-chat-tomb { color: var(--au-ink-sub) !important; }
.eos-chat-msg__avatar--tomb { background: var(--au-surface-3) !important; box-shadow: none; }

/* ===== 9. Image / GIF messages (new in v2.1.161) =================== */
.au-msg-media {
  margin-top: 6px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--au-line-2);
  max-width: 260px;
  display: inline-block;
  background: var(--au-surface-2);
  cursor: zoom-in;
  position: relative;
}
.au-msg-media img { display: block; width: 100%; height: auto; max-height: 320px; object-fit: cover; }
.au-msg-media__badge {
  position: absolute; left: 7px; bottom: 7px;
  background: rgba(18,41,72,.78); color: #fff;
  font-size: 9px; font-weight: 700; letter-spacing: .5px;
  padding: 2px 7px; border-radius: 99px;
}
.au-msg-media__skel { height: 150px; width: 220px; background: linear-gradient(100deg, var(--au-surface-2) 30%, var(--au-surface-3) 50%, var(--au-surface-2) 70%); background-size: 200% 100%; animation: auSkel 1.2s infinite; }
@keyframes auSkel { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* Composer attachment preview */
.au-attach-preview {
  display: flex; align-items: center; gap: 10px;
  background: var(--au-surface-2);
  border-top: 1px solid var(--au-line);
  padding: 9px 12px;
}
.au-attach-preview__thumb {
  width: 42px; height: 42px; border-radius: 9px; flex: none;
  background: var(--au-surface-3) center/cover no-repeat;
  border: 1px solid var(--au-line-2);
  display: flex; align-items: center; justify-content: center;
  color: var(--au-coral);
}
.au-attach-preview__meta { min-width: 0; flex: 1; }
.au-attach-preview__name { font-size: 12.5px; color: var(--au-ink); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.au-attach-preview__sub  { font-size: 11px; color: var(--au-ink-sub); }
.au-attach-preview__bar { height: 3px; border-radius: 99px; background: var(--au-line-2); overflow: hidden; margin-top: 4px; }
.au-attach-preview__bar i { display: block; height: 100%; width: 0; background: var(--au-coral); transition: width .2s; }
.au-attach-preview__x {
  margin-left: auto; border: none; background: transparent;
  color: var(--au-ink-mut); width: 28px; height: 28px; border-radius: 50%; cursor: pointer; font-size: 17px;
}
.au-attach-preview__x:hover { background: var(--au-surface-3); color: var(--au-coral); }

/* ===== 10. GIF picker popover ====================================== */
.au-gif-pop {
  position: absolute; z-index: 200;
  width: 320px; max-width: 92vw;
  padding: 10px;
  display: none;
}
.au-gif-pop.is-open { display: block; animation: auBarIn .15s ease; }
.au-gif-pop__search {
  width: 100%; box-sizing: border-box;
  background: var(--au-surface-2); border: 1px solid var(--au-line-2);
  color: var(--au-ink); border-radius: 9px; padding: 8px 11px;
  font-size: 13.5px; outline: none; margin-bottom: 8px;
}
.au-gif-pop__search:focus { border-color: var(--au-coral); box-shadow: 0 0 0 3px var(--au-coral-soft); }
.au-gif-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
  max-height: 230px; overflow-y: auto;
}
.au-gif-cell {
  aspect-ratio: 1; border-radius: 9px; overflow: hidden;
  background: var(--au-surface-3); cursor: pointer;
  border: 1.5px solid transparent; transition: border-color .12s, transform .12s;
}
.au-gif-cell:hover { border-color: var(--au-coral); transform: scale(1.03); }
.au-gif-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.au-gif-pop__note { font-size: 11px; color: var(--au-ink-sub); text-align: center; padding: 14px 0; }
.au-gif-pop__powered { font-size: 9.5px; color: var(--au-ink-sub); text-align: right; padding-top: 6px; letter-spacing: .3px; }

/* ===== 11. Thread drawer (threaded replies) ======================== */
.au-thread-pill {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 6px;
  font-size: 12px; font-weight: 600; color: var(--au-coral);
  cursor: pointer; background: none; border: none; padding: 2px 0;
}
.au-thread-pill:hover { text-decoration: underline; }
.au-thread-pill__av { display: inline-flex; }
.au-thread-pill__av span {
  width: 17px; height: 17px; border-radius: 50%; margin-left: -5px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 8px; color: #fff; font-weight: 600;
  box-shadow: 0 0 0 1.5px var(--au-surface);
}
.au-thread-drawer {
  position: absolute; inset: 0; z-index: 40;
  background: var(--au-surface);
  display: flex; flex-direction: column;
  animation: auDrawerIn .22s cubic-bezier(.2,.7,.3,1);
}
@keyframes auDrawerIn { from { transform: translateX(14px); opacity: 0; } to { transform: none; opacity: 1; } }
.au-thread-drawer__head {
  display: flex; align-items: center; gap: 9px;
  padding: 12px 14px; border-bottom: 1px solid var(--au-line);
  background: var(--au-surface-2);
}
.au-thread-drawer__back {
  border: none; background: var(--au-surface); border: 1px solid var(--au-line-2);
  width: 32px; height: 32px; border-radius: 50%; cursor: pointer;
  color: var(--au-navy); display: flex; align-items: center; justify-content: center;
}
.au-thread-drawer__back:hover { border-color: var(--au-coral); color: var(--au-coral); }
.au-thread-drawer__title { font-family: 'Jost', sans-serif; font-weight: 600; font-size: 15px; color: var(--au-navy); }
.au-thread-drawer__title small { display: block; font-family: 'Barlow', sans-serif; font-weight: 400; font-size: 11.5px; color: var(--au-ink-sub); }
.au-thread-drawer__body { flex: 1; overflow-y: auto; padding: 8px; }
.au-thread-parent {
  background: var(--au-coral-soft);
  border-radius: 12px; padding: 10px 12px; margin: 4px 4px 10px;
}
.au-thread-parent .au-tp-who { font-weight: 600; font-size: 13px; color: var(--au-coral-ink); }
.au-thread-parent .au-tp-text { font-size: 14px; color: var(--au-ink); margin-top: 2px; }
.au-thread-reply { display: flex; gap: 9px; padding: 7px 6px; }
.au-thread-reply__av { width: 28px; height: 28px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; font-size: 11px; color: #fff; font-weight: 600; }
.au-thread-reply__who { font-weight: 600; font-size: 12.5px; }
.au-thread-reply__text { font-size: 13.5px; color: var(--au-ink); line-height: 1.45; }
.au-thread-reply__time { font-size: 10px; color: var(--au-ink-sub); margin-left: 5px; }
.au-thread-drawer__foot {
  border-top: 1px solid var(--au-line);
  padding: 10px 12px;
  display: flex; gap: 8px; align-items: center;
  background: var(--au-surface-2);
}
.au-thread-drawer__foot button {
  flex: 1; border: none; background: var(--au-coral); color: #fff;
  border-radius: 99px; padding: 9px; font-size: 13.5px; font-weight: 600; cursor: pointer;
}
.au-thread-drawer__foot button:hover { background: var(--au-coral-press); }

/* ===== 12. Lightbox for media ====================================== */
.au-lightbox {
  position: fixed; inset: 0; z-index: 99999;
  background: rgba(11,27,50,.86);
  display: none; align-items: center; justify-content: center;
  padding: 24px; cursor: zoom-out;
  animation: auFade .18s ease;
}
.au-lightbox.is-open { display: flex; }
@keyframes auFade { from { opacity: 0; } to { opacity: 1; } }
.au-lightbox img { max-width: 100%; max-height: 100%; border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }

/* ===== 13. Mobile polish =========================================== */
@media (max-width: 640px) {
  .eos-chat-msg__avatar { width: 32px; height: 32px; font-size: 12px; }
  .eos-chat-msg__text { font-size: 15px; }
  .eos-chat-input { font-size: 16px; }       /* prevents iOS zoom-on-focus */
  .au-gif-pop { width: 280px; }
  .eos-chat-actions, .eos-chat-react-bar { top: -14px; }
}

/* ===== 14. Honour reduced motion =================================== */
@media (prefers-reduced-motion: reduce) {
  .eos-chat-msg, .eos-chat-pill, .au-thread-drawer, .au-react-fly,
  .eos-chat-react-bar, .eos-chat-actions { animation: none !important; }
}