/* "Fluid" look: an optional second skin, chosen per browser in /accounts. Every rule lives under html.fluid,
   so the classic look (style.css) is untouched. Mostly token overrides; motion uses real spring curves
   sampled into CSS linear() (damping 1.0 = settle, 0.8 = a little bounce for things the user "throws"). */
html.fluid{
  --ink:#101614;--muted:#5f6b66;--faint:#98a39e;
  --canvas:#f2f4f3;--surface:rgba(255,255,255,.82);--line:rgba(16,22,20,.08);--hover:rgba(16,22,20,.05);
  --brand:#22a45d;--brand-deep:#15804a;--brand-soft:rgba(34,164,93,.12);
  --out:#22a45d;--in:#fff;--chat-bg:#eef1ef;
  --r:18px;--r-sm:12px;
  --mat:rgba(255,255,255,.66);--blur:blur(24px) saturate(180%);--ghost:rgba(255,255,255,.55);--ghost-hover:rgba(255,255,255,.9);--field:rgba(255,255,255,.7);--field-focus:#fff;
  --glow-a:rgba(34,164,93,.10);--glow-b:rgba(47,128,237,.07);--sheet:rgba(255,255,255,.94);--avatar:linear-gradient(145deg,#d9ebe1,#bfdccc);
  --shadow:0 1px 2px rgba(16,22,20,.04),0 8px 24px -12px rgba(16,22,20,.12);
  --shadow-lg:0 24px 64px -24px rgba(16,22,20,.35),0 0 0 1px rgba(16,22,20,.04);
  --spring:linear(0, 0.07241, 0.2198, 0.3796, 0.5244, 0.6447, 0.7395, 0.8119, 0.8657, 0.905, 0.9334, 0.9536, 0.9678, 0.9778, 0.9848, 0.9896, 0.9929, 0.9952, 0.9967, 0.9978, 0.9985, 0.999, 0.9993, 0.9995, 0.9997, 0.9998, 1);
  --spring-bounce:linear(0, 0.07621, 0.24, 0.4248, 0.5948, 0.7342, 0.8395, 0.9136, 0.962, 0.9912, 1.007, 1.014, 1.015, 1.014, 1.011, 1.008, 1.006, 1.004, 1.002, 1.001, 1.001, 1, 0.9999, 0.9998, 0.9998, 0.9998, 1);
}

/* ---- type: system font, size-specific tracking, weight carries hierarchy ---- */
html.fluid body{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI Variable Text","Segoe UI",system-ui,sans-serif;font-size:15px;line-height:1.45;color:var(--ink);
  background:radial-gradient(1200px 600px at 100% 0,var(--glow-a),transparent 60%),radial-gradient(900px 500px at 0 100%,var(--glow-b),transparent 60%),var(--canvas);background-attachment:fixed;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-optical-sizing:auto}
html.fluid h1,html.fluid h2,html.fluid .brand{letter-spacing:-.015em;font-weight:700}
html.fluid .topbar h1{font-size:1.35rem;line-height:1.15;border:0;padding:0}
html.fluid .card h2{font-size:1.1rem;line-height:1.2}
html.fluid label{font-size:.8rem;font-weight:600;letter-spacing:.01em;color:var(--muted)}
html.fluid .hint{font-size:.8rem;letter-spacing:.005em}

html.fluid ::selection{background:var(--brand-soft)}
html.fluid *{scrollbar-width:thin;scrollbar-color:rgba(16,22,20,.18) transparent}
html.fluid :focus-visible{outline:0;box-shadow:0 0 0 4px var(--brand-soft)}

/* ---- controls: feedback on press, not on release ---- */
html.fluid button{border-radius:11px;padding:9px 16px;font-weight:600;background:linear-gradient(135deg,#2bb56c,#17874d);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 6px 16px -8px rgba(34,164,93,.8);
  transition:transform .4s var(--spring),filter .15s,box-shadow .15s,opacity .15s}
html.fluid button:hover{background:linear-gradient(135deg,#2bb56c,#17874d);filter:brightness(1.06)}
html.fluid button:active{transform:scale(.96);transition-duration:.08s}
html.fluid button.ghost,html.fluid button.danger{background:var(--ghost);border:1px solid var(--line);box-shadow:0 1px 2px rgba(16,22,20,.05);filter:none}
html.fluid button.ghost:hover{background:var(--ghost-hover)}
html.fluid button.danger:hover{background:var(--red-soft)}
html.fluid button.icon,html.fluid .cal-grid button{background:transparent;box-shadow:none;border-radius:9px;filter:none}
html.fluid button.icon:hover,html.fluid .cal-grid button:hover{background:var(--hover)}
html.fluid input,html.fluid select,html.fluid textarea,html.fluid .dd-btn{border-radius:11px;background:var(--field);border:1px solid var(--line);box-shadow:inset 0 1px 2px rgba(16,22,20,.04);
  transition:border-color .15s,box-shadow .15s,background .15s}
html.fluid input:focus,html.fluid select:focus,html.fluid textarea:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-soft);background:var(--field-focus)}
html.fluid .sheet input:focus,html.fluid .ctable input[type=text]:focus,html.fluid .contacts .search input:focus{background:var(--field-focus)}
html.fluid .dd-btn{box-shadow:none}
html.fluid .dd-acct .dd-btn,html.fluid .acct select{background:var(--brand-soft);border-color:transparent;border-radius:99px;padding-inline:14px}

/* ---- shell: translucent chrome, content as the ground ---- */
html.fluid .side{background:var(--mat);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);border-inline-start:1px solid rgba(255,255,255,.5);box-shadow:-1px 0 0 var(--line);padding:18px 12px}
html.fluid .brand{font-size:1.25rem}
html.fluid .side nav a{border-radius:11px;padding:9px 12px;font-weight:600;transition:background .15s,color .15s,transform .4s var(--spring)}
html.fluid .side nav a:active{transform:scale(.97);transition-duration:.08s}
html.fluid .side nav a.active{background:linear-gradient(135deg,#2bb56c,#17874d);color:#fff;box-shadow:0 6px 18px -8px rgba(34,164,93,.7)}
html.fluid .side nav a.active svg{stroke-width:2.2}
html.fluid .side .me{border-top:1px solid var(--line);font-size:.8rem}
html.fluid .topbar{background:var(--mat);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);border:0;box-shadow:0 1px 0 var(--line);padding:14px 24px}
html.fluid .content{padding:24px}
html.fluid .card{background:var(--surface);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.6);box-shadow:var(--shadow);border-radius:var(--r);padding:22px}
html.fluid .stack>*+*{margin-top:18px}
html.fluid .content>*,html.fluid .content>.stack>*{animation:rise .5s var(--spring) both}
html.fluid .content>.stack>*:nth-child(2){animation-delay:.04s}html.fluid .content>.stack>*:nth-child(3){animation-delay:.08s}html.fluid .content>.stack>*:nth-child(n+4){animation-delay:.12s}
@keyframes rise{from{opacity:0;transform:translateY(10px)}}

html.fluid table{font-size:.92rem}
html.fluid td,html.fluid th{padding:10px 8px;border-bottom:1px solid var(--line)}
html.fluid th{font-size:.78rem;letter-spacing:.02em;text-transform:none}
html.fluid tbody tr:last-child td{border-bottom:0}
html.fluid .tag{padding:2px 10px;font-size:.74rem;letter-spacing:.01em;background:var(--hover)}
html.fluid .empty b{font-weight:600}
html.fluid pre.log{border-radius:var(--r-sm);background:#0e1512}

/* ---- popovers & sheets: a material arriving, anchored to what opened it ---- */
html.fluid .pop,html.fluid .menu{background:var(--mat);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);border:1px solid rgba(255,255,255,.6);box-shadow:var(--shadow-lg);border-radius:14px;padding:6px;
  transform-origin:top right;animation:materialize .4s var(--spring-bounce) both}
@keyframes materialize{from{opacity:0;transform:scale(.94) translateY(-6px);filter:blur(6px)}}
html.fluid .dd-menu div,html.fluid .menu div{border-radius:9px;padding:9px 12px}
html.fluid .dd-menu div.on{background:var(--brand);color:#fff}
html.fluid .cal{width:300px}
html.fluid .cal-grid button{border-radius:10px;box-shadow:none}
html.fluid .cal-grid button.on{background:var(--brand);color:#fff}
html.fluid .modal{background:rgba(16,22,20,.32);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);animation:scrim .25s ease-out both}
@keyframes scrim{from{opacity:0}}
html.fluid .modal .card{background:var(--sheet);box-shadow:var(--shadow-lg);border-radius:22px;padding:24px;transform-origin:center bottom;animation:pop .5s var(--spring-bounce) both;will-change:transform}
@keyframes pop{from{opacity:0;transform:scale(.92) translateY(16px)}}
html.fluid .modal .grab{display:none;position:relative;width:40px;height:5px;border-radius:99px;background:var(--faint);margin:-8px auto 14px;opacity:.6;touch-action:none;cursor:grab}
html.fluid .modal .grab:before{content:"";position:absolute;inset:-14px -24px -12px}  /* a bigger finger target than the 5px bar */
html.fluid .toast{border-radius:14px;padding:11px 18px;background:rgba(16,22,20,.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:var(--shadow-lg);transition:opacity .25s,transform .5s var(--spring-bounce);transform:translateY(16px) scale(.96)}
html.fluid .toast.show{transform:none}

/* ---- inbox: chat as conversation, not a table ---- */
html.fluid .contacts{background:var(--mat);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);border-inline-end:1px solid var(--line)}
html.fluid .contacts .search{border:0;padding:12px 12px 6px}
html.fluid .contacts .search input{border-radius:99px;background:var(--hover);border-color:transparent;padding-inline:14px}
html.fluid .contacts li{border:0;margin:2px 8px;border-radius:14px;padding:10px 12px;transition:background .15s,transform .4s var(--spring)}
html.fluid .contacts li:active{transform:scale(.98);transition-duration:.08s}
html.fluid .contacts li.active{background:var(--brand);color:#fff}
html.fluid .contacts li.active .snip,html.fluid .contacts li.active .meta{color:rgba(255,255,255,.75)}
html.fluid .contacts li.active .avatar{background:rgba(255,255,255,.22);color:#fff}
html.fluid .contacts li.active .badge{background:#fff;color:var(--brand-deep)}
html.fluid .avatar{background:var(--avatar);color:var(--brand-deep);font-weight:600}
html.fluid .avatar.picked{background:var(--brand);color:#fff}
html.fluid .thread{background:var(--chat-bg)}
html.fluid .thread .head{background:var(--mat);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);border:0;box-shadow:0 1px 0 var(--line)}
html.fluid .msgs{padding:18px 22px;gap:4px}
html.fluid .bubble{border-radius:18px;padding:8px 13px 6px;box-shadow:0 1px 1px rgba(16,22,20,.05);font-size:.96rem}
html.fluid .bubble.out{background:var(--out);color:#fff;border-start-start-radius:18px;border-end-start-radius:6px}
html.fluid .bubble.in{background:var(--in);border-start-end-radius:18px;border-end-end-radius:6px}
html.fluid .bubble.out .time{color:rgba(255,255,255,.7)}
html.fluid .bubble.out .time.read{color:#fff}
html.fluid .bubble.out .tpl,html.fluid .bubble.out .file,html.fluid .bubble.out a{color:#fff}
html.fluid .bubble+.bubble.out,html.fluid .bubble+.bubble.in{margin-top:0}
html.fluid .day{background:rgba(16,22,20,.06);color:var(--muted);font-weight:600;font-size:.72rem}
html.fluid .compose{background:var(--mat);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);border:0;box-shadow:0 -1px 0 var(--line);padding:10px 14px calc(10px + env(safe-area-inset-bottom))}
html.fluid .compose textarea{border-radius:20px;padding:10px 14px}
html.fluid .window{font-weight:600}

/* ---- templates, lists, automations ---- */
html.fluid .tpl-item{border-radius:14px;border:1px solid transparent;background:var(--surface);box-shadow:var(--shadow);padding:12px 14px;transition:transform .4s var(--spring),box-shadow .15s,background .15s}
html.fluid .tpl-item:active{transform:scale(.985);transition-duration:.08s}
html.fluid .tpl-item.active{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft),var(--shadow)}
html.fluid .phone{border-radius:34px;padding:16px 10px;background:linear-gradient(160deg,#1c2622,#0b120f);box-shadow:var(--shadow-lg)}
html.fluid .phone .screen{border-radius:24px}
html.fluid .phone .msg,html.fluid .phone .btns div{border-radius:14px}
html.fluid .phone .msg{color:#101614}
html.fluid .tpl-item:hover{background:var(--ghost-hover)}
html.fluid .tpl-item.active{background:var(--ghost-hover)}
html.fluid .how div{border-radius:var(--r-sm);background:rgba(16,22,20,.04)}
html.fluid .chip{font-weight:600}
html.fluid .var{border-radius:6px;padding:0 5px}
html.fluid .sw span{transition:background .2s}
html.fluid .sw span:before{transition:transform .45s var(--spring-bounce);box-shadow:0 1px 3px rgba(0,0,0,.25)}
html.fluid .sheet input:focus,html.fluid .ctable input[type=text]:focus{box-shadow:0 0 0 3px var(--brand-soft)}

/* ---- login / connect ---- */
html.fluid .center .card{border-radius:26px;padding:34px 30px;background:var(--sheet)}
html.fluid .center .card h1{font-size:1.7rem;letter-spacing:-.02em}
html.fluid .center .card button{border-radius:14px;padding:12px}

/* ---- phone: nav becomes a bottom tab bar ---- */
@media (max-width:900px){
  html.fluid .shell{grid-template-rows:1fr auto}
  html.fluid .side{grid-row:2;border:0;box-shadow:0 -1px 0 var(--line);padding:6px 6px calc(6px + env(safe-area-inset-bottom));gap:0}
  html.fluid .main{grid-row:1}
  html.fluid .side nav a{flex-direction:column;gap:3px;font-size:.68rem;font-weight:600;padding:6px 4px;border-radius:12px}
  html.fluid .side nav a.active{background:transparent;color:var(--brand-deep);box-shadow:none}
  html.fluid .side nav a.active svg{color:var(--brand)}
  html.fluid .topbar{padding:10px 12px}
  html.fluid .content{padding:14px}
  html.fluid .modal{align-items:end}
  html.fluid .modal .card{width:100vw!important;max-width:none;border-radius:22px 22px 0 0;max-height:92vh;padding-bottom:calc(24px + env(safe-area-inset-bottom));position:relative}
  html.fluid .modal .grab{display:block}
  @keyframes pop{from{opacity:0;transform:translateY(40px)}}
  html.fluid .toast{bottom:calc(74px + env(safe-area-inset-bottom))}
}

/* ---- dark: follows the device, same materials, deeper ground ---- */
@media (prefers-color-scheme:dark){
  html.fluid{color-scheme:dark;
    --ink:#eef2f0;--muted:#9aa6a1;--faint:#66726d;
    --canvas:#0c100e;--surface:rgba(26,32,29,.78);--line:rgba(255,255,255,.08);--hover:rgba(255,255,255,.06);
    --brand:#2fc16f;--brand-deep:#6ddd9c;--brand-soft:rgba(47,193,111,.16);
    --out:#1f8f52;--in:#232d28;--chat-bg:#0f1512;
    --amber:#e3a94f;--amber-soft:rgba(227,169,79,.16);--red:#f0705f;--red-soft:rgba(240,112,95,.16);--blue:#5aa0ff;
    --mat:rgba(18,23,21,.72);--ghost:rgba(255,255,255,.06);--ghost-hover:rgba(255,255,255,.11);--field:rgba(255,255,255,.06);--field-focus:rgba(255,255,255,.1);
    --sheet:rgba(26,32,29,.97);--avatar:linear-gradient(145deg,#28402f,#1a2b21);
    --glow-a:rgba(47,193,111,.14);--glow-b:rgba(90,160,255,.08);
    --shadow:0 1px 2px rgba(0,0,0,.3),0 12px 32px -16px rgba(0,0,0,.6);--shadow-lg:0 32px 80px -24px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.06)}
  html.fluid *{scrollbar-color:rgba(255,255,255,.18) transparent}
  html.fluid .side,html.fluid .card,html.fluid .pop,html.fluid .menu{border-color:rgba(255,255,255,.06)}
  html.fluid .modal{background:rgba(0,0,0,.5)}
  html.fluid .toast{background:rgba(238,242,240,.94);color:#101614}
  html.fluid .contacts li.active,html.fluid .dd-menu div.on,html.fluid .cal-grid button.on,html.fluid .avatar.picked{background:var(--out)}  /* white text needs the deeper green here */
  html.fluid .day{background:rgba(255,255,255,.08)}
  html.fluid .bubble.in{box-shadow:0 1px 1px rgba(0,0,0,.3)}
  html.fluid .how div{background:rgba(255,255,255,.05)}
  html.fluid pre.log{background:#070b09}
}

/* ---- gentler for people who ask for it ---- */
@media (prefers-reduced-motion:reduce){
  html.fluid *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  html.fluid .toast{transform:none}
}
@media (prefers-reduced-transparency:reduce){
  html.fluid{--mat:#fff;--surface:#fff;--blur:none}
  html.fluid .side,html.fluid .topbar,html.fluid .card,html.fluid .pop,html.fluid .menu,html.fluid .modal,html.fluid .contacts,html.fluid .thread .head,html.fluid .compose{backdrop-filter:none;-webkit-backdrop-filter:none}
}
@media (prefers-contrast:more){
  html.fluid{--line:rgba(16,22,20,.35);--muted:#3d4744}
  html.fluid .card{border-color:var(--line)}
}