/* ============================================================================
   Grasp — iMessage skin.  King chose this look 2026-06-30.
   Pure override layer: loaded AFTER grasp.css, changes only the SKIN (colors,
   surfaces, bubbles, rows, typography). No HTML/JS changes — delete the <link>
   in grasp.html to revert instantly.
   ============================================================================ */
:root{
  --im-bg:#000;
  --im-elev:#1c1c1e;
  --im-sep:rgba(255,255,255,.10);
  --im-blue:#0a84ff;
  --im-gray:#262629;          /* incoming bubble (iOS dark) */
  --im-sec:#8e8e93;           /* iOS secondary label */
}

/* ---- Surfaces → true black -------------------------------------------------*/
body, #grasp-app, #thread-list, #chat-view, #threads,
.messages, .send-form, .send-hint{ background:var(--im-bg) !important; }
#thread-list{ border-right:none !important; max-width:440px; }
#chat-view{ border-left:none !important; }

/* ---- Thread list: big iOS title + hairline rows (no cards) -----------------*/
.thread-header{
  background:rgba(0,0,0,.78) !important;
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  border-bottom:.5px solid var(--im-sep) !important;
  padding:calc(env(safe-area-inset-top) + 10px) 16px 10px !important;
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.thread-header h1{
  font-size:30px !important; font-weight:800 !important; letter-spacing:-.02em !important;
  color:#fff !important; margin:0 !important; flex:1 1 auto;
}
/* slim the top buttons into iOS pills */
.thread-header .users-btn, #money-btn{
  background:rgba(255,255,255,.10) !important; border:none !important; color:#fff !important;
  border-radius:999px !important; padding:6px 12px !important; font-size:13px !important;
}
.thread-header .back-link{ color:var(--im-blue) !important; font-size:22px; }
.current-user-badge{ background:rgba(255,255,255,.08) !important; border:none !important; color:var(--im-sec) !important; }

.thread-item{
  background:transparent !important; border:none !important;
  border-bottom:.5px solid var(--im-sep) !important; border-radius:0 !important;
  padding:9px 16px !important; margin:0 !important; box-shadow:none !important;
}
.thread-item.active, .thread-item:hover{ background:rgba(255,255,255,.06) !important; }
.thread-avatar{ width:48px !important; height:48px !important; border-radius:50% !important; font-size:20px !important; }
.thread-name{ font-size:16px !important; font-weight:600 !important; letter-spacing:-.01em !important; color:#fff !important; text-transform:none !important; }
.thread-preview{ font-size:14px !important; color:var(--im-sec) !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; }
.thread-time{ font-size:12px !important; color:var(--im-sec) !important; }
.unread-badge{ background:var(--im-blue) !important; color:#fff !important; border:none !important; border-radius:999px !important; min-width:20px !important; height:20px !important; font-size:12px !important; font-weight:700 !important; }

/* ---- Chat header: translucent, iOS ----------------------------------------*/
.chat-header{
  background:rgba(0,0,0,.72) !important;
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  border-bottom:.5px solid var(--im-sep) !important;
  padding:calc(env(safe-area-inset-top) + 8px) 10px 8px !important;
}
.sister-name{ font-size:16px !important; font-weight:600 !important; letter-spacing:-.01em !important; }
.sister-status{ font-size:11px !important; color:var(--im-sec) !important; }
.back-btn{ color:var(--im-blue) !important; font-size:28px !important; font-weight:400 !important; }
.clear-thread-btn{ color:var(--im-blue) !important; background:transparent !important; border:none !important; font-weight:500 !important; }
#voice-btn, #autoplay-btn, #gl-toggle-btn, #grasp-speak-btn{ filter:grayscale(.2); }

/* ---- Message bubbles: blue out, gray in, no colored borders ---------------*/
.messages{ padding:12px 12px 16px !important; gap:3px !important; }
.msg{
  max-width:78% !important; padding:8px 13px !important; font-size:16px !important;
  line-height:1.33 !important; border-radius:19px !important; border:none !important; box-shadow:none !important;
}
.msg.king{
  background:var(--im-blue) !important; color:#fff !important; align-self:flex-end !important;
  border-bottom-right-radius:6px !important;
}
.msg.sister, .msg.sister.soria, .msg.sister.jakarta, .msg.sister.juno,
.msg.sister.zila, .msg.sister.council{
  background:var(--im-gray) !important; color:#fff !important; align-self:flex-start !important;
  border-left:none !important; border-bottom-left-radius:6px !important;
}
.msg-text{ color:inherit !important; }
.msg.king .msg-time{ color:rgba(255,255,255,.6) !important; }
.msg.sister .msg-time{ color:var(--im-sec) !important; }
.msg-sister-label{ color:var(--im-sec) !important; font-weight:600 !important; font-size:12px !important; }

/* ---- Composer: iOS capsule + blue ↑ send ----------------------------------*/
.send-form{
  border-top:.5px solid var(--im-sep) !important;
  padding:8px 12px calc(8px + env(safe-area-inset-bottom)) 12px !important;
}
#msg-input{
  background:transparent !important; border:1.5px solid var(--im-sep) !important;
  border-radius:20px !important; min-height:40px !important; max-height:200px !important;
  padding:9px 14px !important; font-size:16px !important; color:#fff !important;
}
#msg-input:focus{ border-color:#3a3a3c !important; box-shadow:none !important; }
#send-btn{ background:var(--im-blue) !important; width:36px !important; height:36px !important; border-radius:50% !important; font-size:0 !important; }
#send-btn::after{ content:"↑"; font-size:20px; font-weight:800; color:#fff; }
.send-hint{ display:none !important; }

/* attach / mic / location buttons → subtle iOS gray circles */
#attach-btn, #grasp-loc-btn, #grasp-speak-btn{
  background:transparent !important; color:var(--im-blue) !important; border:none !important;
}
/* 📍 state must WIN over the blue above — it never did (2026-06-30 → 2026-09-28),
   so King's pin looked the same on/off/pending and he could not tell a tap did anything. */
#grasp-loc-btn.loc-on{ color:#34c759 !important; }
#grasp-loc-btn.loc-pending{ color:#ffd60a !important; }
.loc-status{ background:var(--im-bg) !important; border-top:none !important; }