/* ══ member-skin.css - THE ROOM'S LANGUAGE, EVERYWHERE (founder, 2026-08-02) ══════════════
   "Please make sure ALL pages and functions are updated with the new design on both website
   and app." Every authenticated member surface + the chat popup loads this AFTER its own
   inline styles. One file, one place to change - the split-into-two-products failure that
   made yesterday's fix necessary cannot recur if there is only one skin. */

/* ── SHELL ────────────────────────────────────────────────────────────────────────────── */
.topbar,.dash-topbar,.sc-top{border-bottom:1px solid rgba(201,168,76,0.10) !important;background:rgba(10,9,8,0.55) !important;backdrop-filter:blur(8px)}
.sidebar,.opsb,.dash-layout > .sidebar{border-right:1px solid rgba(201,168,76,0.08) !important}
.sb-user,.sidebar-user{border-top:1px solid rgba(201,168,76,0.10) !important}
.sb-logo,.sidebar-logo{border-bottom:1px solid rgba(201,168,76,0.10) !important}

/* ── SURFACES: any card in the app, one language ────────────────────────────────────── */
.card,.fcard,.mc,.rp,.ep,.phc,.cd,.brief,.panel,.tcard,.briefing-card,.stat-card,.hero,.op-modal-card,.hdd-menu{
  background:linear-gradient(180deg,rgba(29,26,22,.9) 0%,rgba(21,18,16,.95) 100%) !important;
  border:1px solid rgba(201,168,76,0.14) !important;
  border-radius:16px !important;
  box-shadow:inset 0 1px 0 rgba(245,240,232,.05) !important;
}
.hero{border-radius:22px !important;box-shadow:0 30px 80px -40px rgba(0,0,0,.9), inset 0 1px 0 rgba(245,240,232,.06) !important}
.op-modal-card{border-radius:20px !important}
.tcard:hover{border-color:rgba(201,168,76,0.35) !important}

/* ── TYPE ─────────────────────────────────────────────────────────────────────────────── */
.card-title,.bc-title,.panel-title,.ftitle{font-family:'DM Serif Display',serif !important;font-weight:400 !important;color:#f5f0e8 !important}
.card-sub,.bc-subtitle,.fsub{color:#9a9488 !important;line-height:1.65 !important}
.mini-head,.section-label,.cl,.ud-section-label,.sect,.bc-label,.stat-label{
  font-family:'DM Mono',monospace !important;letter-spacing:.18em !important;text-transform:uppercase !important;color:#8f897c !important
}

/* ── FORM FIELDS: ink-soft rounded, gold on focus ───────────────────────────────────── */
.field label{font-size:10px !important;letter-spacing:.18em !important;color:#8f897c !important}
.field input,.field select,.field textarea,.gi,input[type=text]:not(.raw),input[type=number]:not(.raw),input[type=date]:not(.raw),input[type=email]:not(.raw),textarea:not(.raw){
  background:rgba(245,240,232,.04) !important;
  border:1px solid rgba(201,168,76,0.14) !important;
  border-radius:12px !important;
  color:#f5f0e8 !important;
}
.field input:focus,.field select:focus,.field textarea:focus,.gi:focus{border-color:rgba(201,168,76,.5) !important;outline:none}
.field input::placeholder,.field textarea::placeholder{color:#8f897c !important}

/* ── BUTTONS: pills; gold is a soft gradient, never a flat slab ─────────────────────── */
.btn,.gbtn,.stbtn,.ebtn,.ce-btn,.bo,.topbar-btn,.starter-btn,.mood-btn,.pill-add{
  border-radius:999px !important;
  letter-spacing:.02em !important;
}
.btn-gold,.gbtn,.stbtn,.topbar-btn.gold{background:linear-gradient(135deg,#e8d5a3,#c9a84c) !important;color:#0a0908 !important;border:none !important}
.btn-ghost,.bo,.tbtn-ghost,.topbar-btn:not(.gold){background:rgba(245,240,232,.04) !important;border:1px solid rgba(201,168,76,0.14) !important;color:#f5f0e8 !important}

/* ── LISTS + DIVIDERS ────────────────────────────────────────────────────────────────── */
.divider,.pe,.es,.rr,.conv-item{border-color:rgba(201,168,76,0.10) !important}
.log-list{border-radius:14px !important;border:1px solid rgba(201,168,76,0.14) !important;background:transparent !important}
.log-row{background:transparent !important}
.alert{border-radius:12px !important}
.empty{color:#9a9488 !important}

/* ══ CHAT-SPECIFIC (chat.html topbar, composer, welcome, starters) ═══════════════════ */
/* The chat page keeps its own bubble shapes; only the CHROME needs to speak the room's
   language. Bubbles already carry the gold hairline (background:#16130f + gold border). */
.dash-topbar{background:rgba(10,9,8,0.55) !important;border-bottom:1px solid rgba(201,168,76,0.10) !important}
.topbar-greeting{font-family:'DM Serif Display',serif !important;color:#f5f0e8 !important}
.starter-btn{
  background:rgba(245,240,232,.04) !important;
  border:1px solid rgba(201,168,76,0.14) !important;
  border-radius:999px !important;
  color:#f5f0e8 !important;
  padding:9px 15px !important;
  font-size:13px !important;
  font-family:'DM Sans',sans-serif !important;
  cursor:pointer;
  transition:border-color .15s;
}
.starter-btn:hover{border-color:rgba(201,168,76,.5) !important}

/* Chat composer bar (chat.html renders it inline; we can't change the JS attribute-style
   input but we can override with a more specific selector). */
#msg-input{
  background:rgba(245,240,232,.04) !important;
  border:1px solid rgba(201,168,76,0.14) !important;
  border-radius:22px !important;
}
#msg-input:focus{border-color:rgba(201,168,76,.5) !important}
#send-btn{
  background:linear-gradient(135deg,#e8d5a3,#c9a84c) !important;
  border-radius:50% !important;
}
#mic-btn{
  background:rgba(245,240,232,.04) !important;
  border:1px solid rgba(201,168,76,0.14) !important;
  border-radius:50% !important;
}
/* The composer footer strip inherits the ink; give it a gold hairline. */
#msg-input,#send-btn,#mic-btn{transition:border-color .15s,transform .15s}

/* iOS ZOOM GUARD (2026-07-26 / restated 2026-08-02): our skin's soft-ink inputs are 14px
   which triggers Safari's page zoom. 16px on phones wins over the skin. Desktop untouched. */
@media(max-width:820px){
  .field input,.field select,.field textarea,.gi{font-size:16px !important}
}

/* ══ POLISH PASS - the craft layer (founder design refresh, 2026-08-05) ═══════════════════
   "I love the colors and general layout - the spacing/formatting/text just looks beginner."
   Colors and layout are UNCHANGED. This raises the finish: crisp type, calmer rhythm, buttons
   and inputs that respond, a real keyboard-focus ring, and consistent motion. All additive
   overrides on classes the skin already governs - no structural / layout change. */

/* 1) TYPE RENDERING - the single biggest "default" tell is un-smoothed text. */
body{ -webkit-font-smoothing:antialiased !important; -moz-osx-font-smoothing:grayscale !important; text-rendering:optimizeLegibility !important; }

/* 2) TYPE RHYTHM - display headings feel intentional slightly tightened; body copy gets air. */
.card-title,.bc-title,.panel-title,.ftitle,.head,.topbar-greeting,h1,h2,h3{ letter-spacing:-.01em !important; }
.card-sub,.bc-subtitle,.fsub,.sub,.note,.empty,p{ line-height:1.62 !important; }
.mini-head,.section-label,.cl,.ud-section-label,.sect,.bc-label,.stat-label{ font-size:10.5px !important; }

/* 3) CARDS - a whisper of motion + depth on the interactive ones (continuity of feel). */
.card,.fcard,.mc,.brief,.panel,.tcard,.stat-card,.briefing-card{ transition:border-color .18s ease, box-shadow .2s ease, transform .18s ease !important; }
.tcard:hover,.stat-card:hover{ transform:translateY(-1px) !important; box-shadow:0 14px 34px -20px rgba(0,0,0,.75), inset 0 1px 0 rgba(245,240,232,.06) !important; }

/* 4) BUTTONS - weight, a soft press, a warm lift on the gold ones, calm timing. */
.btn,.gbtn,.stbtn,.ebtn,.ce-btn,.bo,.topbar-btn,.starter-btn,.mood-btn,.pill-add,.save,.pill,.chip{
  font-weight:600 !important;
  transition:transform .14s ease, box-shadow .2s ease, border-color .18s ease, background .18s ease !important;
}
.btn:hover,.gbtn:hover,.stbtn:hover,.save:hover,.btn-gold:hover,.pill:hover{ transform:translateY(-1px) !important; }
.btn:active,.gbtn:active,.stbtn:active,.save:active,.starter-btn:active,.pill:active,.chip:active{ transform:translateY(0) scale(.985) !important; }
.btn-gold:hover,.gbtn:hover,.stbtn:hover,.save:hover{ box-shadow:0 10px 26px -12px rgba(201,168,76,.5) !important; }
.save{ letter-spacing:.01em !important; }

/* 5) FOCUS - a visible, on-brand keyboard ring everywhere (accessibility + polish). */
:where(button,a,input,select,textarea,[role=button],[tabindex]):focus-visible{
  outline:2px solid rgba(201,168,76,.6) !important; outline-offset:2px !important; border-radius:8px;
}

/* 6) INPUTS - a soft gold glow on focus instead of a hard border flip. */
.field input:focus,.field select:focus,.field textarea:focus,.gi:focus,#msg-input:focus,
input[type=text]:not(.raw):focus,input[type=email]:not(.raw):focus,textarea:not(.raw):focus{
  box-shadow:0 0 0 3px rgba(201,168,76,.13) !important;
}

/* 7) CHAT - let the bubbles and composer breathe a little more. */
#msg-input{ padding:12px 18px !important; line-height:1.45 !important; }
#send-btn,#mic-btn{ transition:transform .14s ease, box-shadow .2s ease, border-color .18s ease !important; }
#send-btn:hover{ transform:scale(1.05) !important; box-shadow:0 8px 20px -8px rgba(201,168,76,.55) !important; }
#send-btn:active,#mic-btn:active{ transform:scale(.94) !important; }

/* 8) THE SMALL THINGS - selection + a slim on-brand scrollbar say "someone cared". */
::selection{ background:rgba(201,168,76,.30); color:#fff; }
*{ scrollbar-width:thin; scrollbar-color:rgba(201,168,76,.32) transparent; }
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-track{ background:transparent; }
*::-webkit-scrollbar-thumb{ background:rgba(201,168,76,.26); border-radius:999px; border:3px solid transparent; background-clip:content-box; }
*::-webkit-scrollbar-thumb:hover{ background:rgba(201,168,76,.46); background-clip:content-box; }

/* Respect reduced-motion: keep the finish, drop the movement. */
@media(prefers-reduced-motion:reduce){
  *{ transition:none !important; }
  .tcard:hover,.stat-card:hover,.btn:hover,.gbtn:hover,.save:hover,.pill:hover,#send-btn:hover{ transform:none !important; }
}