/* ============================================================================
   INTERFACE — the refreshed chrome for every menu, modal, toast and panel.
   Loaded last: it refines the "island chronicle" skin in style.css rather
   than replacing it (same wood / brass / parchment tokens), with one idea
   throughout — cards FLOAT over the living island: the table stays visible
   (blurred) behind every sheet, things arrive with a soft spring, and every
   control answers the pointer.
   ============================================================================ */
:root{
  --ui-ease:cubic-bezier(.2,.9,.25,1);
  --ui-spring:cubic-bezier(.34,1.45,.64,1);
  --ui-radius:14px;
  --ui-shadow-float:0 30px 80px rgba(8,6,3,.5), 0 8px 20px rgba(8,6,3,.3);
  --ui-frame:
    inset 0 0 0 1px rgba(255,255,255,.6),
    0 0 0 1px #b8893a,
    0 0 0 5px rgba(43,29,17,.92),
    0 0 0 6px #d1a24f,
    0 0 0 7px rgba(20,12,4,.8);
  --ui-glass:rgba(24,16,9,.74);
}

/* ---------------------------------------------------------------- modals */
.modal-overlay{
  background:
    radial-gradient(ellipse at 50% 45%, rgba(12,9,5,.35) 0%, rgba(8,6,3,.72) 100%);
  -webkit-backdrop-filter:blur(10px) saturate(1.1);backdrop-filter:blur(10px) saturate(1.1);
  animation:uiFade .3s ease both;
  padding:24px;
}
@keyframes uiFade{from{opacity:0;}to{opacity:1;}}
#modal-content.modal{
  border-radius:var(--ui-radius);
  box-shadow:var(--ui-frame), var(--ui-shadow-float);
  animation:uiSheetIn .5s var(--ui-ease) both;
}
@keyframes uiSheetIn{
  from{opacity:0;transform:translateY(18px) scale(.965);filter:blur(4px);}
  to{opacity:1;transform:none;filter:none;}
}
.modal-head{padding:26px 40px 14px;border-bottom:none;position:relative;}
.modal-head::after{
  content:"";display:block;height:1px;margin:16px auto 0;width:min(320px,70%);
  background:linear-gradient(90deg,transparent,rgba(163,121,43,.75),transparent);
}
.modal-head .kicker{
  font-family:"IBM Plex Sans",sans-serif;font-size:.64rem;font-weight:600;letter-spacing:.34em;
  text-transform:uppercase;color:var(--brass);
}
.modal-head h2{font-size:1.9rem;letter-spacing:.005em;}
.modal-sub{font-size:.88rem;max-width:34em;margin-left:auto;margin-right:auto;}
.modal-foot{border-top:1px solid rgba(90,60,30,.14);margin:6px 18px 0;padding:14px 12px 20px;}
.modal h2{font-family:var(--font-display);font-weight:600;font-size:1.6rem;}

.modal-close{
  top:14px;right:14px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  font-size:1.2rem;padding:0 0 2px;
  transition:transform .35s var(--ui-spring), color .15s ease, box-shadow .15s ease;
}
.modal-close:hover{transform:rotate(90deg) scale(1.06);box-shadow:0 0 0 3px rgba(209,162,79,.35), 0 2px 4px rgba(0,0,0,.3);}
.modal-close:active{transform:rotate(90deg) scale(.94);}

/* scrollbars inside sheets */
.modal-body,.scroll-panel,#game-log,#chat-log,.sidebar-left #players-panel{scrollbar-width:thin;scrollbar-color:rgba(163,121,43,.55) transparent;}
.modal-body::-webkit-scrollbar,.scroll-panel::-webkit-scrollbar,#game-log::-webkit-scrollbar{width:8px;}
.modal-body::-webkit-scrollbar-thumb,.scroll-panel::-webkit-scrollbar-thumb,#game-log::-webkit-scrollbar-thumb{background:rgba(163,121,43,.5);border-radius:8px;border:2px solid transparent;background-clip:padding-box;}

/* --------------------------------------------------------------- buttons */
.btn-primary{
  border-radius:11px;
  transition:transform .18s var(--ui-spring), filter .15s ease, box-shadow .2s ease;
}
.btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 10px 24px rgba(90,20,10,.35), inset 0 1px 0 rgba(255,255,255,.18);}
.btn-primary:active:not(:disabled){transform:translateY(0) scale(.98);}
.btn-secondary{
  border-radius:11px;
  transition:transform .18s var(--ui-spring), border-color .15s ease, background-color .15s ease;
}
.btn-secondary:hover:not(:disabled){transform:translateY(-2px);}
.btn-secondary:active:not(:disabled){transform:translateY(0) scale(.98);}
.btn-ghost{border-radius:10px;}
.btn-wood{
  border-radius:12px;
  transition:transform .2s var(--ui-spring), filter .15s ease, box-shadow .2s ease;
}
.btn-wood:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 10px 22px rgba(20,12,4,.35);}
.btn-wood:active:not(:disabled){transform:translateY(0) scale(.985);}

/* segmented controls: a sliding-pill feel */
.segmented{border-radius:12px;padding:4px;}
.segmented button{border-radius:9px;transition:background-color .2s ease, color .2s ease, transform .15s var(--ui-spring), box-shadow .2s ease;}
.segmented button.active{box-shadow:0 3px 10px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.12);}
.segmented button:disabled{opacity:.4;cursor:not-allowed;}

/* resource cards inside the trade sheets */
.res-card{border-radius:10px;transition:transform .2s var(--ui-spring), box-shadow .2s ease, opacity .15s ease;}
.res-card:hover:not(:disabled){transform:translateY(-6px) rotate(-1deg);}
.res-card.picked{transform:translateY(-4px);}

/* ------------------------------------------------------------ settings */
.settings-section{padding:6px 0 10px;}
.settings-section h3{
  font-family:"IBM Plex Sans",sans-serif;font-size:.64rem;font-weight:600;letter-spacing:.28em;text-transform:uppercase;
  color:var(--brass);margin:14px 0 8px;
}
.theme-picker{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.theme-option{
  border-radius:12px;padding:12px 12px 12px 12px;align-items:flex-start;
  transition:transform .2s var(--ui-spring), border-color .15s ease, background-color .15s ease, box-shadow .2s ease;
}
.theme-option:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(60,40,15,.15);}
.theme-option:has(input:checked){box-shadow:0 0 0 2px var(--brass-light), 0 8px 18px rgba(60,40,15,.18);}
.theme-option-body small{line-height:1.35;}
@media (max-width:720px){.theme-picker{grid-template-columns:1fr;}}

/* --------------------------------------------------------- achievements */
.ach-progress{height:8px;border-radius:8px;background:rgba(58,42,24,.14);overflow:hidden;margin:4px 6px 16px;}
.ach-progress span{display:block;height:100%;width:var(--p);border-radius:inherit;
  background:linear-gradient(90deg,#b8893a,#f2cf7a);box-shadow:0 0 12px rgba(242,207,122,.6);
  animation:achFill 1.2s var(--ui-ease) both .2s;}
@keyframes achFill{from{width:0;}}
.ach-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding-bottom:8px;}
.ach-card{
  display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;
  background:rgba(255,255,255,.28);border:1px solid rgba(90,60,30,.18);
  opacity:.62;filter:grayscale(.7);
}
.ach-card.on{opacity:1;filter:none;background:linear-gradient(135deg,rgba(255,244,210,.8),rgba(236,214,160,.55));border-color:rgba(184,137,58,.55);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 4px 10px rgba(90,60,20,.12);}
.ach-medal{
  flex:0 0 42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.25rem;
  background:radial-gradient(circle at 35% 30%, #fff6dc, #d9b86a 70%, #a47a2c);
  box-shadow:inset 0 -2px 4px rgba(0,0,0,.25), 0 0 0 2px rgba(120,84,30,.5);
}
.ach-card:not(.on) .ach-medal{background:radial-gradient(circle at 35% 30%, #eee4cf, #b8ab90);}
.ach-text{display:flex;flex-direction:column;gap:2px;min-width:0;}
.ach-text strong{font-family:var(--font-display);font-size:1.05rem;font-weight:700;color:var(--ink);line-height:1.1;}
.ach-text small{font-size:.74rem;color:var(--ink-soft);line-height:1.3;}
@media (max-width:640px){.ach-grid{grid-template-columns:1fr;}}

/* ---------------------------------------------------------------- toasts */
#toast-container{top:96px;right:348px;gap:10px;}
.toast{
  position:relative;max-width:320px;padding:11px 16px 11px 18px;border-radius:12px;
  background:var(--ui-glass);color:#f6ead0;border:1px solid rgba(209,162,79,.55);
  -webkit-backdrop-filter:blur(12px) saturate(1.2);backdrop-filter:blur(12px) saturate(1.2);
  font-family:"IBM Plex Sans",sans-serif;font-size:.84rem;font-weight:500;line-height:1.35;
  box-shadow:0 14px 30px rgba(6,4,2,.4);
  animation:uiToastIn .55s var(--ui-spring) both, uiToastOut .45s ease 2.75s forwards;
}
.toast::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:3px;background:linear-gradient(#f2cf7a,#b8893a);}
@keyframes uiToastIn{from{opacity:0;transform:translateX(26px) scale(.96);}to{opacity:1;transform:none;}}
@keyframes uiToastOut{to{opacity:0;transform:translateX(16px);}}
@media (max-width:1000px){#toast-container{right:10px;top:10px;}}

/* ------------------------------------------------------------ chat drawer */
.chat-drawer{
  border-radius:var(--ui-radius);border:1px solid rgba(209,162,79,.55);
  background:var(--ui-glass);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:0 24px 50px rgba(6,4,2,.45);color:#f6ead0;
  animation:uiSheetIn .4s var(--ui-ease) both;
}
.chat-drawer .chat-drawer-title{color:var(--brass-pale);}
.chat-drawer #chat-input{border-radius:10px;}

/* ------------------------------------------------------ board tooltips */
.board3d-tooltip,.b2d-tip{
  border-radius:10px;padding:6px 11px;background:var(--ui-glass);border-color:rgba(209,162,79,.6);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  font-family:var(--font-display);font-size:.98rem;font-weight:600;letter-spacing:.01em;
}

/* -------------------------------------------------------- HUD finishing */
@media (min-width:1001px){
  body.immersive .topbar .icon-btn,body.immersive .rules-btn{transition:transform .2s var(--ui-spring), filter .15s ease;}
  body.immersive .topbar .icon-btn:hover,body.immersive .rules-btn:hover{transform:translateY(-1px) scale(1.05);}
  body.immersive #bottom-bar .resource-chip{transition:transform .25s var(--ui-spring), box-shadow .2s ease;}
  body.immersive #bottom-bar .resource-chip:hover{transform:translateY(-8px) rotate(-1.5deg);}
  body.immersive #bottom-bar .build-btn{transition:transform .25s var(--ui-spring), filter .15s ease, border-color .15s ease;}
  body.immersive #bottom-bar .build-btn:hover:not(.disabled){transform:translateY(-6px);}
  body.immersive .player-card{transition:background-color .3s ease, box-shadow .3s ease;}
  /* the settler whose turn it is glows softly */
  body.immersive .player-card.active-turn{box-shadow:inset 0 0 0 1px rgba(242,207,122,.55), 0 0 24px rgba(242,207,122,.12);}
}

/* ------------------------------------------------------------ setup menu */
.crew-net-btn{border-radius:10px;transition:transform .2s var(--ui-spring), border-color .15s ease, background-color .15s ease;}
.crew-net-btn:hover{transform:translateY(-2px);}
.btn-primary.seal-btn{border-radius:12px;}
@media (min-width:1001px){
  body.menu-live .chart,body.menu-live .crew{border-radius:var(--ui-radius);}
  body.menu-live .crew .player-row,body.menu-live .crew-section .player-row{border-radius:12px;}
}

/* -------------------------------------------- reconnect + discard banners */
.reconnect-banner,.discard-wait-banner{
  border-radius:var(--ui-radius);background:var(--ui-glass);color:#f6ead0;border:1px solid rgba(209,162,79,.55);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 20px 44px rgba(6,4,2,.45);
}

/* ------------------------------------------------------------ game over */
.gameover-card{border-radius:var(--ui-radius);box-shadow:var(--ui-frame), var(--ui-shadow-float);}

/* keyboard focus: a warm ring everywhere */
:focus-visible{outline:2px solid #f2cf7a;outline-offset:3px;border-radius:6px;}

@media (prefers-reduced-motion:reduce){
  #modal-content.modal,.toast,.chat-drawer,.ach-progress span{animation:none;}
  .btn-primary,.btn-secondary,.btn-wood,.res-card,.theme-option,.modal-close{transition:none;}
}

/* ---- turn call-out bell: upright (never slanted by the banner's italic), rings in ---- */
.turn-banner{display:flex;align-items:center;justify-content:center;gap:.35em;}
.turn-banner-bell{display:inline-flex;font-style:normal;transform-origin:50% 8%;animation:bellRing 1.3s cubic-bezier(.36,.07,.19,.97) .35s both;}
.turn-banner-bell .ico{width:1.05em;height:1.05em;filter:drop-shadow(0 3px 8px rgba(0,0,0,.55)) drop-shadow(0 0 14px rgba(255,210,120,.45));}
@keyframes bellRing{
  0%{transform:rotate(0) scale(.6);opacity:0;}
  12%{transform:rotate(-22deg) scale(1.08);opacity:1;}
  26%{transform:rotate(18deg) scale(1);}
  40%{transform:rotate(-13deg);}
  54%{transform:rotate(9deg);}
  68%{transform:rotate(-5deg);}
  82%{transform:rotate(2deg);}
  100%{transform:rotate(0);}
}

/* ================= "LES COLONS" — roster cards (js/hud/players-panel.js) ================= */
.sidebar-left .sidebar-title{position:relative;}
.sidebar-left .sidebar-title[data-turn]::after{
  content:attr(data-turn);display:block;margin-top:3px;
  font:700 .56rem/1 "IBM Plex Sans",sans-serif;letter-spacing:.2em;text-transform:uppercase;color:rgba(232,196,120,.6);
}
.sidebar-left #players-panel{gap:6px;padding:4px 2px 10px;}
.player-card.roster{
  display:grid;grid-template-columns:54px 1fr auto;grid-template-areas:"avatar main vp" "stats stats stats";
  column-gap:10px;row-gap:7px;align-items:center;
  flex:0 0 auto;min-height:0;max-height:none;margin:0;padding:10px 10px 9px 10px;
  border:1px solid rgba(184,137,58,.16);border-radius:10px;
  background:linear-gradient(180deg,rgba(255,240,210,.035),rgba(0,0,0,.14));
  box-shadow:none;transition:background-color .3s ease, border-color .3s ease, box-shadow .3s ease, opacity .3s ease;
}
.player-card.roster::after{display:none;}
.player-card.roster:not(.active-turn){opacity:.86;}
.player-card.roster:not(.active-turn):hover{opacity:1;border-color:rgba(184,137,58,.35);}
.player-card.roster.active-turn{
  opacity:1;padding:10px 10px 9px 10px;margin:0;
  border-color:color-mix(in srgb, var(--house) 55%, #e8c478 45%);
  background:
    radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--house) 22%, transparent), transparent 60%),
    linear-gradient(180deg,rgba(255,240,210,.07),rgba(0,0,0,.2));
  box-shadow:0 0 0 1px rgba(0,0,0,.4), 0 0 22px color-mix(in srgb, var(--house) 22%, transparent), 0 6px 16px rgba(0,0,0,.4);
}
.player-card.roster .pc-avatar{grid-area:avatar;width:54px;height:54px;}
.player-card.roster .pc-avatar-img{left:7px;top:7px;width:40px;height:40px;}
.player-card.roster .pc-avatar-ring{inset:3.5px;}
.player-card.roster.active-turn .pc-avatar::after{
  content:"";position:absolute;inset:-5px;border-radius:50%;pointer-events:none;
  border:2px solid color-mix(in srgb, var(--house) 70%, #fff 30%);
  animation:rcPulse 1.8s ease-out infinite;
}
@keyframes rcPulse{0%{transform:scale(.92);opacity:.95;}100%{transform:scale(1.22);opacity:0;}}
.rc-lead{position:absolute;left:50%;top:-11px;transform:translateX(-50%);display:flex;filter:drop-shadow(0 2px 2px rgba(0,0,0,.7));}
.rc-lead .ico{width:20px;height:20px;}
.rc-main{grid-area:main;min-width:0;display:flex;flex-direction:column;gap:3px;}
.rc-head{display:flex;align-items:center;gap:6px;min-width:0;}
.player-card.roster .pc-name{font-size:1.22rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;}
.rc-tag{flex-shrink:0;font:700 .5rem/1 "IBM Plex Sans",sans-serif;letter-spacing:.12em;padding:2px 4px;border-radius:3px;color:rgba(232,196,120,.75);border:1px solid rgba(232,196,120,.35);}
.rc-status{
  flex-shrink:0;display:inline-flex;align-items:center;gap:2px;
  font:700 .52rem/1 "IBM Plex Sans",sans-serif;letter-spacing:.1em;text-transform:uppercase;
  padding:3px 6px;border-radius:999px;color:#1c130a;background:color-mix(in srgb, var(--house) 45%, #f2d48c 55%);
  box-shadow:0 1px 3px rgba(0,0,0,.4);
}
.rc-dots{display:inline-flex;gap:1.5px;margin-left:1px;}
.rc-dots i{width:2.5px;height:2.5px;border-radius:50%;background:currentColor;animation:rcDot 1.1s ease-in-out infinite;}
.rc-dots i:nth-child(2){animation-delay:.15s;}.rc-dots i:nth-child(3){animation-delay:.3s;}
@keyframes rcDot{0%,60%,100%{opacity:.25;transform:none;}30%{opacity:1;transform:translateY(-1.5px);}}
.player-card.roster .pc-house{margin:0;display:flex;align-items:center;gap:6px;text-transform:uppercase;}
.rc-awards{display:inline-flex;gap:3px;}
.rc-award{width:17px;height:17px;object-fit:contain;filter:drop-shadow(0 1px 2px rgba(0,0,0,.7));}
/* segmented track to the VP target */
.rc-track{display:flex;gap:2px;margin-top:2px;}
.rc-track i{flex:1 1 0;height:5px;border-radius:2px;background:rgba(0,0,0,.45);box-shadow:inset 0 0 0 1px rgba(184,137,58,.18);}
.rc-track i.on{
  background:linear-gradient(180deg,color-mix(in srgb, var(--house) 55%, #fff 45%),var(--house));
  box-shadow:0 0 5px color-mix(in srgb, var(--house) 45%, transparent);
}
.rc-track i.new{animation:rcSeg .7s cubic-bezier(.3,1.6,.5,1) both;animation-delay:calc(var(--k,0) * 120ms + 150ms);}
@keyframes rcSeg{0%{transform:scaleY(1);filter:brightness(1);background:rgba(0,0,0,.45);}40%{transform:scaleY(2.2);filter:brightness(1.8);}100%{transform:none;filter:none;}}
/* big VP count */
.rc-vp{grid-area:vp;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:40px;line-height:1;}
.rc-vp strong{font-family:var(--font-display);font-weight:700;font-size:2rem;color:#fbe7b4;text-shadow:0 2px 6px rgba(0,0,0,.6);font-variant-numeric:tabular-nums;}
.rc-vp small{font:700 .5rem/1 "IBM Plex Sans",sans-serif;letter-spacing:.2em;color:rgba(232,196,120,.6);margin-top:1px;}
.rc-vp em{font:500 .5rem/1.2 "IBM Plex Sans",sans-serif;font-style:normal;color:rgba(232,196,120,.5);margin-top:3px;white-space:nowrap;}
.rc-vp.up strong{animation:rcVpUp .8s cubic-bezier(.3,1.7,.5,1);}
@keyframes rcVpUp{0%{transform:scale(1);}30%{transform:scale(1.55);color:#fff;text-shadow:0 0 18px rgba(255,214,120,.95);}100%{transform:none;}}
/* stat pills */
.rc-stats{grid-area:stats;display:grid;grid-template-columns:repeat(4,1fr);gap:4px;}
.rc-stat{
  display:flex;align-items:center;justify-content:center;gap:5px;padding:3px 0;border-radius:6px;
  background:rgba(0,0,0,.26);box-shadow:inset 0 0 0 1px rgba(184,137,58,.13);
  font:500 .72rem/1 "IBM Plex Sans",sans-serif;color:rgba(240,226,196,.72);cursor:default;
}
.rc-stat .ico{width:13px;height:13px;}
.rc-stat b{font-weight:700;color:#f4e3bd;font-variant-numeric:tabular-nums;}
.rc-stat.risk{background:rgba(143,42,28,.55);box-shadow:inset 0 0 0 1px rgba(255,140,110,.5);animation:rcRisk 1.6s ease-in-out infinite;}
.rc-stat.risk b{color:#ffe0d6;}
@keyframes rcRisk{0%,100%{box-shadow:inset 0 0 0 1px rgba(255,140,110,.5);}50%{box-shadow:inset 0 0 0 1px rgba(255,160,130,.9),0 0 10px rgba(255,90,60,.45);}}
@media (prefers-reduced-motion:reduce){
  .player-card.roster.active-turn .pc-avatar::after,.rc-dots i,.rc-stat.risk,.rc-track i.new,.rc-vp.up strong{animation:none;}
}

/* ================= TABLE TALK (chat drawer, js/hud/chat-panel.js) ================= */
.chat-drawer{width:348px;padding:12px 12px 12px;gap:8px;}
.chat-drawer-head{margin-bottom:0;}
.chat-drawer #chat-log{
  display:flex;flex-direction:column;gap:10px;height:300px;max-height:min(300px,42vh);overflow-y:auto;margin:0;
  padding:10px 8px;border-radius:12px;background:rgba(0,0,0,.22);box-shadow:inset 0 0 0 1px rgba(209,162,79,.14), inset 0 8px 18px rgba(0,0,0,.25);
  font:400 .82rem/1.38 "IBM Plex Sans",sans-serif;color:#f3e6c8;overscroll-behavior:contain;
}
.chat-empty{margin:auto;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;color:rgba(243,230,200,.6);font-size:.78rem;padding:0 18px;}
.chat-empty b{font-family:var(--font-display);font-size:1.15rem;font-weight:600;color:var(--brass-pale);}
.chat-empty-icon{font-size:1.8rem;margin-bottom:2px;filter:grayscale(.2);}
.chat-run{display:flex;align-items:flex-end;gap:7px;max-width:92%;}
.chat-run.mine{align-self:flex-end;flex-direction:row-reverse;}
.chat-avatar{width:28px;height:28px;border-radius:50%;object-fit:cover;flex-shrink:0;background:var(--parch-1);
  box-shadow:0 0 0 2px var(--house), 0 2px 4px rgba(0,0,0,.5);}
.chat-run-body{display:flex;flex-direction:column;gap:3px;min-width:0;align-items:flex-start;}
.chat-run.mine .chat-run-body{align-items:flex-end;}
.chat-meta{display:flex;align-items:baseline;gap:6px;padding:0 4px;}
.chat-meta .chat-name{font:700 .68rem/1 "IBM Plex Sans",sans-serif;letter-spacing:.02em;color:color-mix(in srgb, var(--house) 55%, #fff 45%);max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.chat-run.mine .chat-meta .chat-name{display:none;}
.chat-meta time{font:500 .6rem/1 "IBM Plex Mono",monospace;color:rgba(243,230,200,.4);}
.chat-msg{
  padding:6px 11px;border-radius:14px;word-break:break-word;text-wrap:pretty;max-width:100%;
  background:rgba(255,246,226,.1);box-shadow:inset 0 0 0 1px rgba(255,246,226,.08);
}
.chat-run:not(.mine) .chat-msg{border-bottom-left-radius:5px;}
.chat-run.mine .chat-msg{
  background:linear-gradient(180deg,#e6c27a,#c89a48);color:#23180b;border-bottom-right-radius:5px;
  box-shadow:0 2px 6px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.35);
}
.chat-msg.chat-emote,.chat-run.mine .chat-msg.chat-emote{background:none;box-shadow:none;padding:0 2px;font-size:1.9rem;line-height:1.1;}
.chat-msg.fresh{animation:chatMsgIn .45s cubic-bezier(.3,1.5,.5,1) both;}
.chat-run:not(.mine) .chat-msg.fresh{transform-origin:0 100%;}
.chat-run.mine .chat-msg.fresh{transform-origin:100% 100%;}
@keyframes chatMsgIn{from{opacity:0;transform:scale(.7) translateY(6px);}to{opacity:1;transform:none;}}
/* one-tap phrases + emotes */
.chat-quick{display:flex;gap:5px;overflow-x:auto;scrollbar-width:none;padding:1px;mask-image:linear-gradient(90deg,#000 88%,transparent);}
.chat-quick::-webkit-scrollbar{display:none;}
.chat-chip{
  flex-shrink:0;padding:5px 10px;border-radius:999px;cursor:pointer;white-space:nowrap;
  font:600 .72rem/1 "IBM Plex Sans",sans-serif;color:#f3e6c8;
  background:rgba(255,246,226,.08);border:1px solid rgba(209,162,79,.4);
  transition:background-color .15s ease, transform .2s var(--ui-spring,ease), border-color .15s ease;
}
.chat-chip:hover{background:rgba(209,162,79,.25);border-color:rgba(242,207,122,.8);transform:translateY(-1px);}
.chat-chip:active{transform:scale(.95);}
.chat-drawer .emote-row{display:grid;grid-template-columns:repeat(8,1fr);gap:4px;margin:0;}
.chat-drawer .emote-row button{
  width:auto;height:32px;font-size:1.15rem;border-radius:9px;border:1px solid transparent;background:rgba(255,246,226,.06);
  transition:transform .2s var(--ui-spring,ease), background-color .15s ease;
}
.chat-drawer .emote-row button:hover{background:rgba(255,246,226,.16);border-color:transparent;transform:translateY(-2px) scale(1.15);}
.chat-drawer .emote-row button:active{transform:scale(.9);}
.chat-drawer .chat-input-row{gap:6px;}
.chat-drawer #chat-input{
  padding:9px 12px;font-size:.84rem;border-radius:999px;color:#f6ead0;
  background:rgba(0,0,0,.3);border:1px solid rgba(209,162,79,.35);
}
.chat-drawer #chat-input::placeholder{color:rgba(243,230,200,.45);}
.chat-drawer #chat-input:focus-visible{border-color:rgba(242,207,122,.85);box-shadow:0 0 0 3px rgba(209,162,79,.2);}
.chat-drawer #chat-send-btn{width:36px;height:36px;border-radius:50%;background:linear-gradient(180deg,#e6c27a,#c89a48);color:#23180b;border:none;box-shadow:0 2px 6px rgba(0,0,0,.35);}
.chat-drawer #chat-send-btn:hover{filter:brightness(1.08);}
.chat-unread-badge.bump{animation:badgeBump .5s cubic-bezier(.3,1.8,.5,1);}
@keyframes badgeBump{0%{transform:scale(.4);}60%{transform:scale(1.3);}100%{transform:none;}}
@media (prefers-reduced-motion:reduce){.chat-msg.fresh,.chat-unread-badge.bump{animation:none;}}