/* ===========================================================================
   PREMIUM CORPORATE SKIN
   Loaded last on home, sign-in, iPhone, Settings and Notes. Visual layer only: no layout that JS
   measures is changed, and every colour is derived from the active palette
   tokens, so the theme and button-colour pickers in Settings keep working.

   Specificity: styles.css and app-themes.css paint most surfaces with
   !important behind long attribute selectors. Rules here are scoped under
   #chatView, or under :root:not(#premium) for things that live outside it
   (the :not(#id) adds ID weight without matching anything), so they win once
   instead of fighting each of those rules.
   =========================================================================== */

:root{
  --p-font:"Inter",ui-sans-serif,-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI Variable Text","Segoe UI",Roboto,sans-serif;
  --p-brand:#5b6cff;
  --p-brand-2:#8b5cf6;
  --p-on-brand:#ffffff;

  --p-bg:var(--theme-bg,var(--bg,#000));
  --p-panel:var(--theme-panel,var(--panel,#0b0b0b));
  --p-soft:var(--theme-soft,var(--panel-soft,var(--surface-2,#050505)));
  --p-text:var(--theme-text,var(--text,#ededed));
  --p-muted:var(--theme-muted,var(--muted,#8f8f8f));

  --p-hair:color-mix(in srgb,var(--p-text) 8%,transparent);
  --p-hair-strong:color-mix(in srgb,var(--p-text) 14%,transparent);
  --p-lift:color-mix(in srgb,var(--p-text) 4%,transparent);
  --p-lift-strong:color-mix(in srgb,var(--p-text) 8%,transparent);
  --p-brand-soft:color-mix(in srgb,var(--p-brand) 14%,transparent);
  --p-mine:linear-gradient(135deg,var(--p-brand) 0%,var(--p-brand-2) 100%);
  --p-glass:var(--p-panel);
  --p-shadow:0 16px 40px -20px rgba(0,0,0,.6),0 0 0 1px var(--p-hair);
  --p-pop:0 24px 60px -12px rgba(0,0,0,.6),0 0 0 1px var(--p-hair-strong);
  --p-online:#22c55e;
}
/* A button colour picked in Settings becomes the brand colour. */
html[data-app-accent]:not([data-app-accent="auto"]){
  --p-brand:var(--theme-accent);
  --p-brand-2:var(--theme-accent-dark);
  --p-on-brand:var(--theme-accent-ink,#fff);
}
/* Coloured palettes keep their own "my message" colour when left on auto. */
html[data-app-accent="auto"][data-app-theme]:not([data-app-theme="default"]):not([data-app-theme="custom"]):not([data-app-shade="black"]){
  --p-brand:var(--theme-mine);
  --p-brand-2:color-mix(in srgb,var(--theme-mine) 72%,#000);
}
html:not([data-theme="dark"]){
  --p-shadow:0 40px 90px -40px rgba(15,23,42,.35),0 0 0 1px var(--p-hair-strong);
  --p-pop:0 20px 50px -16px rgba(15,23,42,.3),0 0 0 1px var(--p-hair-strong);
}

/* ---------- canvas ---------- */
:root:not(#premium) body{
  font-family:var(--p-font);
  letter-spacing:-.003em;
  background:
    radial-gradient(1100px 620px at 8% -12%,color-mix(in srgb,var(--p-brand) 16%,transparent),transparent 62%),
    radial-gradient(900px 560px at 108% 112%,color-mix(in srgb,var(--p-brand-2) 11%,transparent),transparent 60%),
    var(--p-bg)!important;
  color:var(--p-text);
}
:root:not(#premium) *{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--p-text) 18%,transparent) transparent}
:root:not(#premium) :focus-visible{outline-color:var(--p-brand)}
.app-shell{padding:20px}

/* ===========================================================================
   CHAT LAYOUT
   =========================================================================== */
#chatView.chat-layout{
  width:min(1480px,100%);
  height:calc(100dvh - 40px);
  grid-template-columns:340px minmax(0,1fr);
  border-radius:20px;
  border:0!important;
  background:var(--p-panel)!important;
  box-shadow:var(--p-shadow)!important;
}

/* ---------- sidebar ---------- */
#chatView .sidebar{
  background:linear-gradient(180deg,color-mix(in srgb,var(--p-brand) 5%,var(--p-soft)) 0,var(--p-soft) 220px)!important;
  border-right:1px solid var(--p-hair)!important;
}
#chatView .dashboard-brand{
  min-height:64px;padding:14px 16px;gap:11px;
  background:transparent!important;
  border-bottom:1px solid var(--p-hair)!important;
}
#chatView .dashboard-emblem{
  width:34px;height:34px;flex-basis:34px;border-radius:10px;font-size:16px;
  background:var(--p-mine)!important;color:var(--p-on-brand)!important;
  box-shadow:0 8px 20px -6px color-mix(in srgb,var(--p-brand) 70%,transparent),inset 0 1px 0 rgba(255,255,255,.25);
}
#chatView .dashboard-brand p{
  margin:0 0 2px;font-size:10px;font-weight:600;letter-spacing:.14em;
  color:var(--p-muted)!important;opacity:1;
}
#chatView .dashboard-brand h1{font-size:15px;font-weight:650;letter-spacing:-.015em;color:var(--p-text)!important}
#chatView .iphone-page-icon{
  width:32px;height:32px;min-height:32px;flex-basis:32px;border-radius:9px;
  background:transparent!important;border:1px solid var(--p-hair-strong)!important;color:var(--p-muted)!important;
}
#chatView .iphone-page-icon:hover{background:var(--p-lift-strong)!important;color:var(--p-text)!important}

#chatView .sidebar-header{
  min-height:0;padding:14px 16px 12px;
  background:transparent!important;border-bottom:0!important;
}
#chatView .student-account-avatar{
  width:38px;height:38px;flex-basis:38px;font-size:13px;font-weight:650;
  background:var(--p-mine)!important;color:var(--p-on-brand)!important;
  border:2px solid var(--p-soft)!important;
  box-shadow:0 0 0 1.5px color-mix(in srgb,var(--p-brand) 55%,transparent);
}
#chatView .sidebar-header .eyebrow{margin:0 0 2px;font-size:10.5px;font-weight:500;letter-spacing:.02em;text-transform:none;color:var(--p-muted)!important}
#chatView .sidebar-header h2{font-size:14.5px;font-weight:650;letter-spacing:-.01em;color:var(--p-text)!important}
#chatView .account-actions{gap:4px}
#chatView .account-icon-btn{
  width:34px;height:34px;min-width:34px;min-height:34px;border-radius:10px;
  background:transparent!important;border:1px solid transparent!important;color:var(--p-muted)!important;
  box-shadow:none!important;
}
#chatView .account-icon-btn:hover{background:var(--p-lift-strong)!important;border-color:var(--p-hair)!important;color:var(--p-text)!important;transform:none}

/* Utility icons keep their colour tiles from icons.css. */
#chatView .account-utility-row{margin:0;padding:0 16px 14px;gap:6px;border-bottom:1px solid var(--p-hair)}
#chatView .new-chat-popover{
  left:16px;right:16px;padding:14px;border-radius:14px;
  background:var(--p-glass)!important;
  border:0!important;box-shadow:var(--p-pop)!important;
}
#chatView .new-chat-popover label{font-size:12px;font-weight:600;color:var(--p-muted)!important}
#chatView .inline-form input{height:40px;border-radius:10px;background:var(--p-lift)!important;border:1px solid var(--p-hair-strong)!important}
#chatView .inline-form button{border-radius:10px;padding:0 16px;font-weight:600;background:var(--p-mine)!important;color:var(--p-on-brand)!important;border:0!important}

#chatView .conversation-heading{
  padding:16px 20px 8px;font-size:10.5px;font-weight:600;letter-spacing:.12em;
  background:transparent!important;border:0!important;color:var(--p-muted)!important;
}
#chatView .conversation-heading .text-btn{font-size:11.5px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--p-muted)!important}
#chatView .conversation-heading .text-btn:hover{color:var(--p-text)!important}
#chatView .conversation-list{padding:2px 10px 14px;background:transparent!important}

#chatView .conversation-item{
  margin-bottom:2px;border-radius:12px;
  background:transparent!important;border:0!important;box-shadow:none!important;
  transition:background .15s ease;
}
#chatView .conversation-item:hover{background:var(--p-lift-strong)!important}
#chatView .conversation-item.active{
  background:var(--p-brand-soft)!important;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--p-brand) 26%,transparent)!important;
}
#chatView .conversation-item.active::before{
  content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:0 3px 3px 0;background:var(--p-mine);
}
#chatView .conversation-item.is-pinned:not(.active):not(:hover){background:var(--p-lift)!important}
#chatView .conversation-open{padding:10px 6px 10px 12px;gap:12px}
#chatView .conversation-name{font-size:14px;font-weight:600;letter-spacing:-.01em;margin-bottom:2px;color:var(--p-text)!important}
#chatView .conversation-item.has-unread .conversation-name{font-weight:700}
#chatView .conversation-preview{font-size:12.5px;color:var(--p-muted)!important}
#chatView .conversation-preview.unread-preview{color:var(--p-text)!important;font-weight:600!important}
#chatView .conversation-status{font-size:11px;margin-top:3px;opacity:.8;color:var(--p-muted)!important}
#chatView .unread-count-badge{
  min-width:20px;height:20px;padding:0 6px;font-size:11px;font-weight:700;
  background:var(--p-mine);color:var(--p-on-brand);box-shadow:0 4px 12px -4px color-mix(in srgb,var(--p-brand) 70%,transparent);
}
#chatView .conversation-more{flex-basis:34px;font-size:18px;color:var(--p-muted)!important;background:transparent!important}
@media (hover:hover){
  #chatView .conversation-more{opacity:0;transition:opacity .15s ease}
  #chatView .conversation-item:hover .conversation-more,#chatView .conversation-more:focus-visible{opacity:1}
}

/* Avatars: a small set of muted corporate gradients, rotated down the list. */
#chatView .avatar,#chatView .header-avatar{
  width:40px;height:40px;flex:0 0 40px;font-size:14px;font-weight:650;
  color:#fff!important;border:0!important;
  background:linear-gradient(135deg,#6a7bff,#4a55d8)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
}
#chatView .conversation-item:nth-child(5n+2) .avatar{background:linear-gradient(135deg,#2dd4bf,#0f8f84)!important}
#chatView .conversation-item:nth-child(5n+3) .avatar{background:linear-gradient(135deg,#f5b35c,#d27a1e)!important}
#chatView .conversation-item:nth-child(5n+4) .avatar{background:linear-gradient(135deg,#f08ab4,#c2477b)!important}
#chatView .conversation-item:nth-child(5n+5) .avatar{background:linear-gradient(135deg,#94a3b8,#56627a)!important}

/* Presence dot in front of "Online". */
#chatView .conversation-status.online::before,
#chatView .status-text.online::before{
  content:"";display:inline-block;width:6px;height:6px;margin-right:6px;border-radius:50%;vertical-align:1px;
  background:var(--p-online);box-shadow:0 0 0 2px color-mix(in srgb,var(--p-online) 25%,transparent);
}

/* ---------- conversation pane ---------- */
#chatView .chat-panel{background:var(--p-bg)!important}
#chatView .chat-header{
  min-height:64px;padding:10px 16px 10px 20px;
  background:var(--p-glass)!important;
  border-bottom:1px solid var(--p-hair)!important;
}
#chatView .chat-person{gap:12px}
#chatView .chat-header h2{font-size:15.5px;font-weight:650;letter-spacing:-.015em;color:var(--p-text)!important}
#chatView .status-text{margin-top:2px;font-size:12px;color:var(--p-muted)!important}
#chatView .header-actions{gap:2px}
#chatView .header-actions :is(.header-call-btn,.header-logout-btn,.header-menu-btn){
  width:36px;height:36px;min-height:36px;min-width:36px;padding:0;border-radius:10px!important;
  display:grid;place-items:center;
  background:transparent!important;border:1px solid transparent!important;color:var(--p-muted)!important;box-shadow:none!important;
}
#chatView .header-actions :is(.header-call-btn,.header-logout-btn,.header-menu-btn):not(:disabled):hover{
  background:var(--p-lift-strong)!important;border-color:var(--p-hair)!important;color:var(--p-text)!important;transform:none;
}
#chatView .header-call-btn svg{width:19px;height:19px}

#chatView .pinned-message-bar,
#chatView .message-selection-bar{
  background:color-mix(in srgb,var(--p-brand) 7%,var(--p-panel))!important;
  border-bottom:1px solid var(--p-hair)!important;color:var(--p-text)!important;
}
#chatView .pinned-message-bar{box-shadow:inset 3px 0 0 var(--p-brand)}

/* ---------- messages ---------- */
#chatView .message-list:not(.custom-chat-appearance){
  background:radial-gradient(900px 420px at 50% -10%,color-mix(in srgb,var(--p-brand) 6%,transparent),transparent 70%),var(--p-bg)!important;
}
#chatView .message-list{padding:24px clamp(16px,4vw,48px);gap:6px}
/* A little extra air where the speaker changes. */
#chatView .message-row:not(.mine)+.message-row.mine,
#chatView .message-row.mine+.message-row:not(.mine){margin-top:10px}
#chatView .message-bubble{
  padding:8px 13px 6px;border-radius:16px;font-size:14.5px;line-height:1.5;letter-spacing:-.005em;
}
/* A one-to-one chat already names the other person in the header. */
#chatView .message-bubble>.name-label{display:none}
#chatView .message-list:not(.custom-chat-appearance) .message-row:not(.mine) .message-bubble{
  background:color-mix(in srgb,var(--p-text) 7%,var(--p-bg))!important;
  border:1px solid var(--p-hair)!important;color:var(--p-text)!important;
  border-bottom-left-radius:6px;
}
#chatView .message-list:not(.custom-chat-appearance) .message-row.mine .message-bubble{
  background:var(--p-mine)!important;border:0!important;color:var(--p-on-brand)!important;
  border-bottom-right-radius:6px;
}
#chatView .message-time{margin-top:3px;font-size:10.5px;font-variant-numeric:tabular-nums;opacity:1;color:var(--p-muted)!important}
#chatView .message-list:not(.custom-chat-appearance) .message-row.mine :is(.message-time,.message-status,.message-status.sent,.message-status.delivered){
  color:color-mix(in srgb,var(--p-on-brand) 72%,transparent)!important;
}
#chatView .message-list:not(.custom-chat-appearance) .message-row.mine .message-status.seen{
  color:var(--p-on-brand)!important;background:color-mix(in srgb,var(--p-on-brand) 18%,transparent)!important;box-shadow:none!important;
}
#chatView .message-row.mine .reply-quote{background:rgba(0,0,0,.16)!important;border-left-color:color-mix(in srgb,var(--p-on-brand) 70%,transparent)!important;color:inherit!important}
#chatView .message-row:not(.mine) .reply-quote{background:var(--p-lift-strong)!important;border-left-color:var(--p-brand)!important;color:inherit!important}
#chatView .reply-quote{border-radius:8px}
#chatView .message-row.mine .message-bubble .chat-link{color:var(--p-on-brand)}
#chatView .message-row.mine .voice-note-player.mine{background:transparent;padding-inline:0}
#chatView .message-more{color:var(--p-muted)}
#chatView .message-row.selected-message .message-bubble{outline:2px solid var(--p-brand)!important;outline-offset:2px}
#chatView .message-row.selected-message .message-select-check{background:var(--p-brand)!important;border-color:var(--p-brand)!important}
#chatView .reaction-chip{background:var(--p-panel);border:1px solid var(--p-hair-strong);color:var(--p-text)}
#chatView .reaction-chip.mine{background:var(--p-brand-soft);border-color:color-mix(in srgb,var(--p-brand) 45%,transparent)}
#chatView .typing-bubble .typing-dot{background-color:var(--p-muted)}

#chatView .message-date-separator{gap:14px;align-items:center;margin:16px 0 10px}
#chatView .message-date-separator::before,
#chatView .message-date-separator::after{content:"";flex:1;height:1px;background:var(--p-hair)}
#chatView .message-date-separator span{
  min-height:0;padding:3px 10px;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  background:transparent!important;border:0!important;box-shadow:none!important;color:var(--p-muted)!important;
}
#chatView .system-message-text{font-size:12px;color:var(--p-muted)}
#chatView .empty-state{color:var(--p-muted)!important;font-size:13.5px}

/* ---------- composer ---------- */
#chatView .message-composer{
  --composer-accent:var(--p-brand);
  --composer-accent-hover:var(--p-brand-2);
  --composer-accent-light:var(--p-brand);
  --composer-ink:var(--p-on-brand);
  --composer-icon:var(--p-muted);
  --composer-icon-hover:var(--p-text);
  padding:12px clamp(12px,3vw,32px) max(16px,env(safe-area-inset-bottom))!important;
  background:var(--p-bg)!important;border-top:0!important;
}
#chatView .message-composer .composer-pill{
  min-height:54px;padding:6px 7px 6px 8px;border-radius:16px;
  background:color-mix(in srgb,var(--p-text) 5%,var(--p-bg));
  border:1px solid var(--p-hair-strong);
  box-shadow:0 12px 30px -18px rgba(0,0,0,.6);
  transition:border-color .15s ease,box-shadow .15s ease;
}
#chatView .message-composer .composer-pill:focus-within{
  border-color:color-mix(in srgb,var(--p-brand) 55%,transparent);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--p-brand) 14%,transparent),0 12px 30px -18px rgba(0,0,0,.6);
}
#chatView .message-composer .composer-pill textarea{font-size:14.5px!important}
#chatView .message-composer .composer-pill .composer-icon-btn{border-radius:10px!important}
#chatView .message-composer .composer-pill .composer-send{
  width:40px;height:40px;border-radius:12px!important;
  background:var(--p-mine)!important;
  box-shadow:0 8px 18px -8px color-mix(in srgb,var(--p-brand) 85%,transparent)!important;
}
#chatView .message-composer .composer-pill .composer-send:hover:not(:disabled){background:var(--p-mine)!important;filter:brightness(1.1)}

#chatView .reply-preview,
#chatView .attachment-preview,
#chatView .upload-progress{
  background:var(--p-bg)!important;border-top:1px solid var(--p-hair)!important;color:var(--p-text)!important;
  padding-inline:clamp(16px,3vw,36px);
}
#chatView .reply-preview>div{border-left-color:var(--p-brand)}
#chatView .attachment-preview-card{background:var(--p-lift)!important;border:1px solid var(--p-hair-strong)!important;border-radius:12px}

/* ===========================================================================
   FLOATING SURFACES (menus, pickers, dialogs) — live outside #chatView
   =========================================================================== */
:root:not(#premium) :is(.message-menu,.clear-menu,.conversation-menu,.emoji-picker,.reaction-picker){
  background:var(--p-glass)!important;
  
  border:0!important;box-shadow:var(--p-pop)!important;color:var(--p-text)!important;
}
:root:not(#premium) :is(.message-menu,.clear-menu,.conversation-menu){padding:6px;border-radius:14px;min-width:200px}
:root:not(#premium) :is(.message-menu,.clear-menu,.conversation-menu) button{
  padding:8px 10px;border-radius:9px;font:500 13.5px/1.2 var(--p-font);color:var(--p-text)!important;
}
:root:not(#premium) :is(.message-menu,.clear-menu,.conversation-menu) button:hover{background:var(--p-lift-strong)!important}
:root:not(#premium) :is(.message-menu,.clear-menu,.conversation-menu) button.danger{color:#f87171!important}
:root:not(#premium) .emoji-picker{border-radius:16px}
:root:not(#premium) :is(.emoji-picker-head,.emoji-tabs,.composer-picker-modes){border-color:var(--p-hair)!important;background:transparent!important}
:root:not(#premium) .composer-picker-mode.active{background:var(--p-lift-strong)!important;color:var(--p-text)!important;box-shadow:none!important}
:root:not(#premium) .emoji-search-wrap{background:var(--p-lift)!important;border-color:var(--p-hair-strong)!important}

:root:not(#premium) :is(.settings-overlay,.login-sessions-overlay,.pinned-messages-overlay,.chat-theme-overlay,.user-profile-overlay,.nudge-overlay,.message-info-overlay){
  
}
:root:not(#premium) :is(.settings-card,.login-sessions-card,.pinned-messages-card,.chat-theme-card,.user-profile-card,.nudge-card,.message-info-card){
  background:var(--p-panel)!important;color:var(--p-text)!important;
  border:0!important;border-radius:18px;box-shadow:var(--p-pop)!important;
}
:root:not(#premium) :is(.settings-header,.login-sessions-header,.pinned-messages-head,.message-info-header){border-color:var(--p-hair)!important}
:root:not(#premium) :is(.settings-header,.chat-theme-header,.login-sessions-header,.pinned-messages-head,.message-info-header,.nudge-head) button,
:root:not(#premium) .user-profile-close{
  background:var(--p-lift-strong)!important;color:var(--p-text)!important;border:0!important;border-radius:10px!important;
}
:root:not(#premium) :is(.settings-name-form,.settings-password-form) button,
:root:not(#premium) .chat-theme-actions button:not(.secondary),
:root:not(#premium) .nudge-send{
  background:var(--p-mine)!important;color:var(--p-on-brand)!important;border:0!important;border-radius:10px;font-weight:600;
}
:root:not(#premium) .toast{
  border-radius:12px;padding:11px 16px;font-weight:500;
  background:var(--p-glass)!important;color:var(--p-text)!important;
  box-shadow:var(--p-pop);
}
:root:not(#premium) .toast.error{background:#b42318!important;color:#fff!important}

/* ===========================================================================
   SIGN-IN
   =========================================================================== */
:root:not(#premium) .coaching-login{
  width:min(1040px,calc(100% - 32px));max-width:1040px;min-height:620px;
  grid-template-columns:minmax(340px,1.08fr) minmax(340px,.92fr);
  grid-template-rows:1fr auto;
  border-radius:24px;border:0!important;
  background:var(--p-panel)!important;box-shadow:var(--p-shadow)!important;
}
:root:not(#premium) .coaching-banner{
  min-height:0;padding:56px 52px;justify-content:flex-end;color:#fff;
  background:
    radial-gradient(520px 420px at 0% 0%,color-mix(in srgb,var(--p-brand) 55%,transparent),transparent 65%),
    radial-gradient(480px 420px at 100% 100%,color-mix(in srgb,var(--p-brand-2) 40%,transparent),transparent 65%),
    linear-gradient(160deg,#10121d 0%,#07080d 100%)!important;
}
/* Fine grid that fades out: replaces the two decorative circles. */
:root:not(#premium) .coaching-banner::before{
  inset:0;width:auto;height:auto;border:0;border-radius:0;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(ellipse at 30% 25%,#000 20%,transparent 72%);mask-image:radial-gradient(ellipse at 30% 25%,#000 20%,transparent 72%);
}
:root:not(#premium) .coaching-banner::after{display:none}
:root:not(#premium) .academy-mark{
  position:absolute;top:48px;left:52px;width:48px;height:48px;margin:0;border-radius:14px;
  background:var(--p-mine)!important;
  box-shadow:0 14px 34px -8px color-mix(in srgb,var(--p-brand) 80%,transparent),inset 0 1px 0 rgba(255,255,255,.3);
}
:root:not(#premium) .academy-wheel{font-size:22px;color:#fff!important}
:root:not(#premium) .portal-kicker{
  display:inline-flex;align-items:center;gap:8px;margin:0 0 18px;padding:6px 12px;border-radius:999px;
  font-size:11px;font-weight:600;letter-spacing:.12em;color:rgba(255,255,255,.82)!important;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
}
:root:not(#premium) .portal-kicker::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--p-online);box-shadow:0 0 10px var(--p-online)}
:root:not(#premium) .coaching-banner h1{
  font-size:clamp(34px,4.2vw,50px);font-weight:650;letter-spacing:-.035em;line-height:1.04;margin:0 0 14px;
  background:linear-gradient(180deg,#fff 30%,rgba(255,255,255,.66));-webkit-background-clip:text;background-clip:text;color:transparent;
}
:root:not(#premium) .portal-subtitle{max-width:380px;font-size:15px;line-height:1.6;color:rgba(255,255,255,.62)!important}

:root:not(#premium) .login-panel{padding:56px 52px;background:transparent!important;justify-content:center}
:root:not(#premium) .coaching-login .login-heading{margin:0 0 24px;font-size:26px;font-weight:650;letter-spacing:-.025em;color:var(--p-text)!important}
:root:not(#premium) .coaching-login .form-stack{gap:16px}
:root:not(#premium) .coaching-login label>span{margin-bottom:7px;font-size:12.5px;font-weight:550;color:var(--p-text)!important}
:root:not(#premium) .input-shell{
  height:48px;padding:0 14px;gap:10px;border-radius:12px;
  background:var(--p-lift)!important;border:1px solid var(--p-hair-strong)!important;
}
:root:not(#premium) .input-shell>span{display:grid;place-items:center;opacity:1;color:var(--p-muted)}
:root:not(#premium) .input-shell:focus-within{
  border-color:color-mix(in srgb,var(--p-brand) 60%,transparent)!important;
  box-shadow:0 0 0 4px color-mix(in srgb,var(--p-brand) 16%,transparent)!important;
}
:root:not(#premium) .input-shell:focus-within>span{color:var(--p-brand)}
:root:not(#premium) .input-shell input{font-size:15px;color:var(--p-text)!important}
:root:not(#premium) .coaching-submit{
  margin-top:8px;min-height:48px;border-radius:12px;font-weight:600;font-size:15px;letter-spacing:-.005em;
  background:var(--p-mine)!important;color:var(--p-on-brand)!important;border:0!important;
  box-shadow:0 14px 30px -12px color-mix(in srgb,var(--p-brand) 85%,transparent),inset 0 1px 0 rgba(255,255,255,.2)!important;
  transition:filter .15s ease,transform .15s ease;
}
:root:not(#premium) .coaching-submit:hover{filter:brightness(1.08);transform:translateY(-1px)}
:root:not(#premium) .coaching-login .helper-text{margin-top:20px;font-size:12px;color:var(--p-muted)!important}
:root:not(#premium) .login-footer{
  padding:14px 18px;font-size:10.5px;letter-spacing:.14em;
  background:transparent!important;border-top:1px solid var(--p-hair);color:var(--p-muted)!important;
}

/* ===========================================================================
   PHONES
   =========================================================================== */
@media (max-width:760px){
  .app-shell{padding:0}
  #chatView.chat-layout{height:100dvh;grid-template-columns:1fr;border-radius:0;box-shadow:none!important}
  #chatView .mobile-back{min-width:36px;height:36px;border-radius:10px;background:transparent!important;border:0!important;color:var(--p-text)!important}
  #chatView .sidebar{border-right:0!important}
  #chatView .chat-header{padding-left:10px;padding-top:max(10px,env(safe-area-inset-top))}
  #chatView .message-list{padding:16px 12px}
  #chatView .header-logout-btn{margin-left:0}
  #chatView .header-logout-btn::before{display:none}

  :root:not(#premium) .coaching-login{width:100%;min-height:100dvh;grid-template-columns:1fr;grid-template-rows:auto 1fr auto;border-radius:0;box-shadow:none!important}
  :root:not(#premium) .coaching-banner{padding:96px 24px 32px}
  :root:not(#premium) .academy-mark{top:32px;left:24px;width:42px;height:42px}
  :root:not(#premium) .coaching-banner h1{font-size:34px}
  :root:not(#premium) .login-panel{padding:32px 24px}
}

/* ===========================================================================
   NEW FEATURES (premium.js): search fields, jump to latest, empty states
   =========================================================================== */
.p-search{
  display:flex;align-items:center;gap:8px;height:38px;margin:12px 16px 0;padding:0 10px 0 12px;
  border-radius:10px;background:var(--p-lift);box-shadow:inset 0 0 0 1px var(--p-hair);color:var(--p-muted);
  transition:box-shadow .15s ease;
}
.p-search:focus-within{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--p-brand) 55%,transparent),0 0 0 4px color-mix(in srgb,var(--p-brand) 14%,transparent)}
.p-search svg{width:16px;height:16px;flex:0 0 16px}
:root:not(#premium) .p-search input{
  flex:1;min-width:0;width:auto;height:100%;padding:0;margin:0;font:inherit;font-size:13.5px;
  border:0!important;border-radius:0;background:transparent!important;box-shadow:none!important;outline:0;color:var(--p-text)!important;
}
.p-search kbd{flex:0 0 auto;padding:4px 6px;border-radius:6px;font:600 10.5px/1 var(--p-font);color:var(--p-muted);background:var(--p-lift-strong);box-shadow:inset 0 0 0 1px var(--p-hair)}
@media (hover:none){.p-search kbd{display:none}}
.p-filtered{display:none!important}
[data-p-empty]::after{content:"No matches";display:block;grid-column:1/-1;padding:28px 12px;text-align:center;font-size:13px;color:var(--p-muted)}

#chatView .chat-panel{position:relative}
.p-jump{
  position:absolute;right:22px;bottom:90px;z-index:7;width:40px;height:40px;padding:0;border:0;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;color:var(--p-text);
  background:var(--p-glass);
  box-shadow:var(--p-pop);transition:transform .15s ease;animation:p-rise .18s ease-out;
}
.p-jump[hidden]{display:none}
.p-jump svg{width:18px;height:18px}
.p-jump:hover{transform:translateY(-2px)}
.p-jump.has-new::after{content:"";position:absolute;top:1px;right:1px;width:11px;height:11px;border-radius:50%;background:var(--p-mine);box-shadow:0 0 0 2px var(--p-bg)}
@keyframes p-rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* "Choose a discussion room to begin": an icon above the words. */
#chatView .message-list>.empty-state:only-child::before{
  content:"";display:block;width:60px;height:60px;margin:0 auto 16px;border-radius:18px;
  background:var(--p-brand-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa4ff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12a8 8 0 0 1-11.6 7.1L4 20l1-4.1A8 8 0 1 1 20 12z'/%3E%3Cpath d='M8.5 11h7M8.5 14h4'/%3E%3C/svg%3E") center/28px no-repeat;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--p-brand) 28%,transparent);
}

/* ===========================================================================
   iPHONE (/iphone/): always the single-column phone layout
   =========================================================================== */
.iphone-route .app-shell{padding:0}
.iphone-route #chatView.chat-layout{width:100%;height:100dvh;grid-template-columns:1fr;border-radius:0;box-shadow:none!important}
.iphone-route #chatView .message-bubble{padding:9px 13px 7px;font-size:16px}
.iphone-route #chatView .sidebar{border-right:0!important}
.iphone-route #chatView .chat-header{padding-top:max(10px,env(safe-area-inset-top))}
:root:not(#premium) .iphone-route .coaching-login{
  width:100%;max-width:none;padding:0;grid-template-columns:1fr;grid-template-rows:auto 1fr auto;border-radius:0;box-shadow:none!important;
}
:root:not(#premium) .iphone-route .coaching-banner{padding:calc(env(safe-area-inset-top) + 96px) 24px 32px}
:root:not(#premium) .iphone-route .academy-mark{top:calc(env(safe-area-inset-top) + 32px);left:24px;width:42px;height:42px}
:root:not(#premium) .iphone-route .coaching-banner h1{font-size:34px}
:root:not(#premium) .iphone-route .login-panel{padding:32px 24px max(24px,env(safe-area-inset-bottom))}

/* ===========================================================================
   SETTINGS (/settings/)
   =========================================================================== */
:root:not(#premium) .settings-page-shell{width:min(1040px,calc(100% - 32px));padding:36px 0 80px;background:transparent!important}
.settings-topbar{margin-bottom:28px}
:root:not(#premium) .back-home{
  padding:8px 14px 8px 10px;border-radius:10px;font-size:13.5px;font-weight:600;
  background:transparent!important;border:1px solid var(--p-hair-strong)!important;color:var(--p-muted)!important;box-shadow:none!important;
}
:root:not(#premium) .back-home:hover{background:var(--p-lift-strong)!important;color:var(--p-text)!important;transform:none}
:root:not(#premium) .page-heading p{font-size:11px;font-weight:600;letter-spacing:.16em;color:var(--p-muted)!important}
:root:not(#premium) .page-heading h1{font-size:34px;font-weight:700;letter-spacing:-.035em;color:var(--p-text)!important}
:root:not(#premium) .account-pill{
  display:inline-flex;align-items:center;gap:8px;padding:8px 14px 8px 11px;font-size:13px;font-weight:600;
  background:var(--p-lift)!important;border:1px solid var(--p-hair-strong)!important;color:var(--p-text)!important;
}
.account-pill::before{content:"";flex:0 0 8px;height:8px;border-radius:50%;background:var(--p-online);box-shadow:0 0 0 3px color-mix(in srgb,var(--p-online) 22%,transparent)}
.settings-page-shell .p-search{height:44px;margin:0 0 18px;border-radius:12px}
.p-search:has(+ .settings-grid.hidden){display:none}
.settings-grid{gap:16px}
:root:not(#premium) .settings-page-shell .settings-card{
  padding:24px;border-radius:18px;background:var(--p-panel)!important;
  box-shadow:0 0 0 1px var(--p-hair),0 24px 60px -36px rgba(0,0,0,.7)!important;transition:box-shadow .2s ease;
}
:root:not(#premium) .settings-page-shell .settings-card:hover{box-shadow:0 0 0 1px var(--p-hair-strong),0 24px 60px -36px rgba(0,0,0,.7)!important}
.card-heading{gap:14px;margin-bottom:18px}
:root:not(#premium) .card-heading h2{font-size:17px;font-weight:650;letter-spacing:-.015em;color:var(--p-text)!important}
:root:not(#premium) .card-heading p{font-size:13.5px;color:var(--p-muted)!important}
:root:not(#premium) .card-icon{
  width:40px;height:40px;flex-basis:40px;border-radius:12px;font-size:17px;
  background:var(--p-brand-soft)!important;color:var(--p-text)!important;border:0!important;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--p-brand) 28%,transparent);
}
.setting-row{padding:14px 16px;border-radius:12px;background:var(--p-lift);border-color:var(--p-hair)}
:root:not(#premium) .setting-row input{width:44px;height:26px;background:var(--p-lift-strong)!important;box-shadow:inset 0 0 0 1px var(--p-hair-strong)}
:root:not(#premium) .setting-row input:after{width:20px;height:20px;background:#fff!important}
:root:not(#premium) .setting-row input:checked{background:var(--p-mine)!important;box-shadow:none}
:root:not(#premium) .setting-row input:checked:after{transform:translateX(18px)}
.settings-form{gap:8px}
:root:not(#premium) .settings-form label{font-size:12.5px;font-weight:600;color:var(--p-muted)}
:root:not(#premium) .settings-form input{
  height:44px;padding:0 14px;border-radius:10px;
  background:var(--p-lift)!important;border:1px solid var(--p-hair-strong)!important;color:var(--p-text)!important;
}
:root:not(#premium) .settings-form input:focus{
  border-color:color-mix(in srgb,var(--p-brand) 55%,transparent)!important;
  box-shadow:0 0 0 4px color-mix(in srgb,var(--p-brand) 14%,transparent)!important;
}
:root:not(#premium) :is(.settings-form button,.profile-photo-actions button:not(.secondary-action),.state-card button){
  min-height:44px;padding:0 18px;border-radius:10px;font-weight:600;
  background:var(--p-mine)!important;color:var(--p-on-brand)!important;border:0!important;
  box-shadow:0 12px 26px -14px color-mix(in srgb,var(--p-brand) 85%,transparent)!important;
}
:root:not(#premium) .secondary-action{
  min-height:44px;border-radius:10px;font-weight:600;
  background:transparent!important;border:1px solid var(--p-hair-strong)!important;color:var(--p-text)!important;
}
:root:not(#premium) .secondary-action:hover{background:var(--p-lift-strong)!important}
.theme-grid{grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:12px}
.theme-swatch{border:0;border-radius:14px;box-shadow:0 0 0 1px var(--p-hair-strong);transition:transform .15s ease,box-shadow .15s ease}
.theme-swatch:hover{box-shadow:0 0 0 1px var(--p-hair-strong),0 14px 30px -16px rgba(0,0,0,.7)}
.theme-swatch.selected{box-shadow:0 0 0 2px var(--p-brand),0 14px 30px -16px color-mix(in srgb,var(--p-brand) 70%,transparent)}
.theme-swatch-preview{height:60px}
.theme-swatch-name{font-size:12.5px;font-weight:600;background:var(--p-panel)}
.accent-swatch{border:0;border-radius:12px;font-weight:600;background:var(--p-lift);box-shadow:inset 0 0 0 1px var(--p-hair-strong)}
.accent-swatch.selected{box-shadow:inset 0 0 0 2px var(--p-brand)}
.settings-link-btn{border-color:var(--p-hair);border-radius:14px;background:var(--p-lift)}
.settings-link-btn:hover{background:var(--p-lift-strong);transform:none}
.settings-link-icon{border:0;border-radius:11px;background:var(--p-brand-soft)}
:root:not(#premium) .profile-photo-preview{
  background:var(--p-mine)!important;color:var(--p-on-brand)!important;border:3px solid var(--p-panel)!important;
  box-shadow:0 0 0 2px color-mix(in srgb,var(--p-brand) 55%,transparent),0 18px 40px -18px color-mix(in srgb,var(--p-brand) 80%,transparent);
}
:root:not(#premium) .state-card{border:0;border-radius:18px;background:var(--p-panel);box-shadow:0 0 0 1px var(--p-hair),0 24px 60px -36px rgba(0,0,0,.7)}
@media (max-width:720px){
  :root:not(#premium) .settings-page-shell{width:calc(100% - 20px);padding-top:16px}
  :root:not(#premium) .page-heading h1{font-size:26px}
}

/* ===========================================================================
   NOTES (/notes/)
   =========================================================================== */
:root:not(#premium) body.notes-body{font-family:var(--p-font);background:var(--p-bg)!important}
/* Desktop only. Unscoped, this loaded after notes.css and beat its phone rule
   (.notes-shell{grid-template-columns:1fr} below 900px): a phone kept all three
   desktop columns, and the one visible pane sat in the first, 264px wide. */
@media (min-width:901px){.notes-shell{grid-template-columns:264px 340px 1fr}}
.notes-col{border-right-color:var(--p-hair)}
.notes-folders{background:linear-gradient(180deg,color-mix(in srgb,var(--p-brand) 6%,var(--p-soft)) 0,var(--p-soft) 260px)}
.notes-list{background:var(--p-panel)}
.notes-editor{background:var(--p-bg)}
.notes-col-head{min-height:60px;padding:14px 16px 12px;border-bottom-color:var(--p-hair)}
.notes-col-head h1{font-size:24px;font-weight:700;letter-spacing:-.025em}
.notes-col-head h2{font-size:15px;font-weight:650;letter-spacing:-.01em}
.notes-back-link{min-height:34px;gap:6px;padding:4px 12px 4px 8px;border-radius:10px;border-color:var(--p-hair-strong);background:transparent;color:var(--p-muted);font-size:13px;font-weight:600}
.notes-back-link>span{font-size:18px}
.notes-back-link:hover{border-color:var(--p-hair-strong);background:var(--p-lift-strong);color:var(--p-text)}
.notes-icon-btn{border-radius:10px;color:var(--p-muted)}
.notes-icon-btn:hover{background:var(--p-lift-strong);border-color:transparent;color:var(--p-text);transform:none}
.notes-icon-btn.labelled{border-color:var(--p-hair-strong);color:var(--p-text)}
.notes-icon-btn.labelled:hover{border-color:var(--p-hair-strong)}
.notes-icon-btn .btn-label{font-size:13px;letter-spacing:0}
#newNoteBtn,#newNoteBtn:hover{background:var(--p-mine);border-color:transparent;color:var(--p-on-brand)}
#newNoteBtn:hover{filter:brightness(1.08)}
.p-focus-btn[aria-pressed="true"]{background:var(--p-brand-soft);color:var(--p-text)}
.notes-search{padding:12px 14px 6px}
:root:not(#premium) .notes-search input{
  height:36px;padding:0 12px 0 34px;border-radius:10px;font-size:13.5px;color:var(--p-text)!important;
  border:0!important;box-shadow:inset 0 0 0 1px var(--p-hair)!important;
  background:var(--p-lift) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238f8f8f' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") 11px center/15px no-repeat!important;
}
:root:not(#premium) .notes-search input:focus{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--p-brand) 55%,transparent),0 0 0 4px color-mix(in srgb,var(--p-brand) 14%,transparent)!important}
.notes-tree{padding:4px 10px 12px}
.tree-row{padding:8px;border-radius:10px}
.tree-row:hover{background:var(--p-lift-strong)}
.tree-row.selected{background:var(--p-brand-soft);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--p-brand) 26%,transparent)}
.tree-row .tree-icon{width:28px;height:28px;flex-basis:28px;border-radius:8px;background:color-mix(in srgb,var(--tint) 12%,transparent)}
.tree-row .tree-count{font-size:12px;opacity:.8}
.notes-new-folder{margin:0 10px 10px;padding:10px 12px;border:0;border-radius:10px;color:var(--p-muted);font-size:13.5px;font-weight:600}
.notes-new-folder:hover{background:var(--p-lift-strong);color:var(--p-text)}
.notes-items{padding:8px 10px 14px}
.note-item{margin-bottom:2px;padding:11px 14px;border-radius:12px;transition:background .15s ease}
.note-item+.note-item{border-top:0}
.note-item:hover{background:var(--p-lift-strong)}
.note-item.selected{background:var(--p-brand-soft);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--p-brand) 26%,transparent),inset 3px 0 0 var(--p-brand)}
.note-item .note-title{font-size:14px;font-weight:650;letter-spacing:-.01em}
.note-item .note-sub{margin-top:4px;font-size:12.5px}
.inbox-count.waiting{background:var(--p-mine);color:var(--p-on-brand)}
.note-updated-dot{background:var(--p-brand);box-shadow:0 0 0 3px var(--p-brand-soft)}
/* A centred reading column; the scrollbar stays at the window edge. */
.notes-body-input{padding:36px max(28px,calc((100% - 760px) / 2)) 64px;font-size:16.5px;line-height:1.72;letter-spacing:-.003em}
.notes-body-input h1{font-size:30px;letter-spacing:-.03em}
.notes-body-input h2{font-size:22px;letter-spacing:-.02em}
.notes-body-input blockquote{border-left-color:var(--p-brand)}
.notes-body-input a{color:color-mix(in srgb,var(--p-brand) 70%,var(--p-text))}
.notes-body-input img{border-radius:14px;border-color:var(--p-hair)}
.notes-shared-banner{padding-inline:max(28px,calc((100% - 760px) / 2));background:color-mix(in srgb,var(--p-brand) 7%,var(--p-panel));border-bottom-color:var(--p-hair);box-shadow:inset 3px 0 0 var(--p-brand)}
.notes-toolbar{gap:4px;padding:8px 16px calc(8px + env(safe-area-inset-bottom));border-top-color:var(--p-hair);background:var(--p-glass);}
.tool-btn{min-width:38px;min-height:38px;border-color:transparent;border-radius:10px;background:transparent;color:var(--p-muted);font-size:17px}
.tool-btn:hover{background:var(--p-lift-strong);border-color:transparent;color:var(--p-text)}
.tool-btn.on{background:var(--p-brand-soft);border-color:transparent;color:var(--p-text)}
.tool-status{font-size:12px}
.p-count{margin-right:14px;font-variant-numeric:tabular-nums}
.p-count:empty{display:none}
.notes-overlay{background:rgba(0,0,0,.5);}
.notes-dialog,.format-sheet,.attach-menu,.row-menu{
  border:0;background:var(--p-glass);box-shadow:var(--p-pop);
  
}
.notes-dialog{padding:22px;border-radius:18px}
.notes-dialog h2{font-size:18px;font-weight:650;letter-spacing:-.015em}
.format-sheet{border-radius:20px}
.row-menu button:hover,.attach-menu button:hover{background:var(--p-lift-strong)}
:root:not(#premium) .notes-dialog input:is([type="text"],[type="password"]){background:var(--p-lift)!important;border:1px solid var(--p-hair-strong)!important;border-radius:10px}
:root:not(#premium) .notes-dialog input:is([type="text"],[type="password"]):focus{border-color:color-mix(in srgb,var(--p-brand) 55%,transparent)!important;box-shadow:0 0 0 4px color-mix(in srgb,var(--p-brand) 14%,transparent)!important}
.notes-btn{border-color:transparent;border-radius:10px;background:var(--p-mine);color:var(--p-on-brand);font-weight:600}
.notes-btn:hover{border-color:transparent;filter:brightness(1.08)}
.notes-btn.quiet{background:var(--p-lift-strong);color:var(--p-text)}
.notes-btn.danger{background:transparent;color:#f87171}
.notes-btn.danger:hover{filter:none}
.fmt.on{background:var(--p-mine);color:var(--p-on-brand)}
.seg.on{background:var(--p-lift-strong);box-shadow:inset 0 0 0 1px var(--p-hair-strong)}
.share-perm label:has(input:checked){border-color:color-mix(in srgb,var(--p-brand) 55%,transparent);background:var(--p-brand-soft)}
@media (min-width:901px){
  body.p-focus .notes-folders,body.p-focus .notes-list{display:none}
  body.p-focus .notes-shell{grid-template-columns:1fr}
}
@media (max-width:900px){.p-focus-btn{display:none!important}}

/* ===========================================================================
   LOW-END PCs (low-end-pc.md L2–L4)
   No blur anywhere: a backdrop-filter is recalculated on every frame and is
   the costliest common effect on a computer without a graphics card.
   Endless animations that repaint (background, box-shadow, height) stop, or
   move to transform, which is drawn without repainting.
   =========================================================================== */
:root:not(#premium) *,:root:not(#premium) *::before,:root:not(#premium) *::after{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
:root:not(#premium) .surprise-open-btn.has-surprise{animation:none;background:rgba(244,114,182,.24)}
:root:not(#premium) .settings-link-btn.has-surprise{animation:none;background:var(--theme-accent-soft,rgba(148,163,184,.16))}
:root:not(#premium) .chat-media-slot[data-media-loading]{animation:none}
.rec-wave i,.recording-bubble .rec-wave i{height:13px;animation-name:p-wave}
.recording-bubble .rec-wave i{height:17px}
@keyframes p-wave{0%,100%{transform:scaleY(.3);opacity:.55}50%{transform:scaleY(1);opacity:1}}
@media (prefers-reduced-motion:reduce){.rec-wave i,.recording-bubble .rec-wave i{animation:none}}

/* ===========================================================================
   PHONES — input zoom, touch targets
   Appended last on purpose: premium.css is the last stylesheet each page loads,
   and rule 295 above sets the composer textarea with !important, so an override
   anywhere in styles.css would lose on load order however specific it was.
   =========================================================================== */
@media (max-width:760px){
  /* iOS Safari zooms the whole page when a focused field is under 16px, and it
     does not zoom back out afterwards. Measured before this block: composer
     textarea 14.5px, login fields 15px, the ⌘K search 13.5px, Notes search 13px,
     nudge 14px, call device select 13px, format select 14.5px, Surprise 14px.
     16px is the documented threshold, not a taste call.
     The other way to stop the zoom is maximum-scale=1 / user-scalable=no in the
     viewport meta, which works by disabling pinch-zoom entirely — that breaks
     WCAG 1.4.4 for anyone who needs to magnify, so it is not on the table. */
  input,textarea,select,[contenteditable="true"]{font-size:16px!important}
  #chatView .message-composer .composer-pill textarea{font-size:16px!important}
  :root:not(#premium) .input-shell input,
  :root:not(#premium) .p-search input,
  :root:not(#premium) .notes-search input{font-size:16px!important}

  /* Touch targets. Apple asks for 44x44pt, Android for 48dp; these controls were
     32–38px. Only the controls a thumb actually goes for are widened — sweeping
     every button to 44px would wreck the dense rows (reactions, emoji grid). */
  #chatView .message-composer .composer-pill .composer-icon-btn,
  #chatView .account-icon-btn,
  #chatView .header-actions>button,
  #chatView .header-actions>a{
    min-width:44px;min-height:44px;
  }
  #chatView .mobile-back{min-width:44px;height:44px}

  /* A tap that lands between two 44px targets should not scroll-jank the list. */
  #chatView .message-list{overscroll-behavior:contain}
}

/* ===========================================================================
   MOBILE BROWSERS — engine behaviour, not screen width
   Guarded on (hover:none) and (pointer:coarse) rather than max-width, because
   these are touch/engine quirks: they apply to an iPad at 1024px too, and must
   NOT apply to a narrow window on a desktop with a mouse.
   =========================================================================== */

/* iOS Safari inflates body text when a phone is turned to landscape unless this
   is set. 100% means "use the size I asked for" — it does not block pinch-zoom. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}

/* Android Chrome pull-to-refresh fires when a drag starts at the top of the
   document, reloading the whole app mid-conversation. The message list got its
   own overscroll containment in the phone block; this stops the document behind
   it. `contain` keeps normal scrolling and only kills the refresh gesture. */
html,body{overscroll-behavior-y:contain}

@media (hover:none) and (pointer:coarse){
  /* The message menu opens on a 550 ms long-press
     (app-secure-actions-v8.js:5615). On iOS that exact gesture also raises
     Safari's native selection callout, so the app menu and "Copy / Look Up"
     appear together and fight. Suppressed for touch only: a mouse keeps normal
     text selection, and the menu's own "Copy text" already covers copying. */
  #messageList [data-message-id]{
    -webkit-touch-callout:none;
    -webkit-user-select:none;
    user-select:none;
  }
  /* Anything someone types stays selectable, so the caret and edit still work. */
  #messageList [data-message-id] input,
  #messageList [data-message-id] textarea,
  #messageList [data-message-id] [contenteditable="true"]{
    -webkit-user-select:text;
    user-select:text;
  }
}