/* Mail Agent — "Pop Glass" design system (rose to fuchsia).
   Tokens and base shared with the other MyApps Hub apps apart from the hue block,
   then the console's own layout. Default is light; <html data-theme="dark|light">
   forces one, no attribute follows the OS (theme.js sets it). */

@font-face{
  font-family:"PJS Fallback";
  src:local("Arial"), local("Helvetica Neue"), local("Roboto");
  size-adjust:104%; ascent-override:97%; descent-override:25%; line-gap-override:0%;
}

:root{
  color-scheme: light dark;

  /* per-app hue (Mail Agent: rose to fuchsia) */
  --a1:#be123c; --a2:#a21caf;
  --a1-vivid:#f43f5e; --a2-vivid:#d946ef;
  --a-ink:#be123c;

  --grad:linear-gradient(135deg,var(--a1) 0%,var(--a2) 100%);
  --grad-soft:linear-gradient(135deg,color-mix(in srgb,var(--a1) 13%,transparent),color-mix(in srgb,var(--a2) 13%,transparent));
  --on-grad:#fff;

  --bg:#fbf5f8; --surface:#ffffff; --surface-2:#f6ecf2; --surface-3:#eddbe7;
  --text:#1c1220; --muted:#665a6e;
  --border:rgba(70,20,60,.10); --border-strong:#8f7f99;
  --glass:rgba(255,255,255,.74); --glass-strong:rgba(255,255,255,.9); --glass-border:rgba(70,20,60,.08);
  --scrim:rgba(24,8,24,.48);
  --focus:var(--a1);

  --success:#047857; --success-soft:color-mix(in srgb,#10b981 16%,transparent);
  --warn:#b45309;    --warn-soft:color-mix(in srgb,#f59e0b 20%,transparent);
  --danger:#dc2626;  --danger-soft:color-mix(in srgb,#ef4444 12%,transparent);

  --r-xs:8px; --r-sm:12px; --r-md:16px; --r-lg:22px; --r-xl:28px; --r-pill:999px;
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px; --s-7:32px; --s-8:48px;

  --sh-1:0 1px 2px rgba(70,20,60,.05),0 4px 12px rgba(70,20,60,.06);
  --sh-2:0 2px 4px rgba(70,20,60,.06),0 12px 28px rgba(70,20,60,.12);
  --sh-3:0 4px 8px rgba(70,20,60,.08),0 20px 44px rgba(70,20,60,.18);
  --glow:0 6px 18px color-mix(in srgb,var(--a1) 34%,transparent);
  --glow-lg:0 10px 28px color-mix(in srgb,var(--a1) 40%,transparent),0 2px 6px color-mix(in srgb,var(--a2) 30%,transparent);
  --blur:saturate(180%) blur(18px);

  --font:"Plus Jakarta Sans","PJS Fallback",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --fs-xs:12px; --fs-sm:13.5px; --fs-base:16px; --fs-md:17px; --fs-lg:20px; --fs-xl:26px;

  --dur-1:120ms; --dur-2:220ms; --dur-3:360ms;
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);

  --z-bar:20; --z-menu:45; --z-scrim:85; --z-toast:90;

  --safe-t:env(safe-area-inset-top,0px); --safe-b:env(safe-area-inset-bottom,0px);
  --safe-l:env(safe-area-inset-left,0px); --safe-r:env(safe-area-inset-right,0px);
  --appbar-h:60px;

  /* The hub's shared assistant widget (myapps-hub.com/agent.js, 48px circle) reads
     these. Mail Agent has no floating control of its own; the default keeps it in
     the corner, and the chat view lifts it above the composer (see below). */
  --hub-agent-right:max(16px,var(--safe-r));
  --hub-agent-bottom:calc(16px + var(--safe-b));
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0f0a13; --surface:#1a1220; --surface-2:#251a2d; --surface-3:#312339;
    --text:#f8f0fa; --muted:#b8a8c2;
    --border:rgba(255,255,255,.09); --border-strong:#84739a;
    --glass:rgba(26,18,32,.9); --glass-strong:rgba(26,18,32,.96); --glass-border:rgba(255,255,255,.09);
    --scrim:rgba(0,0,0,.62);
    --success:#34d399; --warn:#fbbf24; --danger:#f87171;
    --sh-1:0 1px 2px rgba(0,0,0,.4),0 4px 12px rgba(0,0,0,.3);
    --sh-2:0 2px 4px rgba(0,0,0,.45),0 12px 28px rgba(0,0,0,.45);
    --sh-3:0 4px 8px rgba(0,0,0,.5),0 20px 44px rgba(0,0,0,.6);
    --a-ink:#fda4af;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0f0a13; --surface:#1a1220; --surface-2:#251a2d; --surface-3:#312339;
  --text:#f8f0fa; --muted:#b8a8c2;
  --border:rgba(255,255,255,.09); --border-strong:#84739a;
  --glass:rgba(26,18,32,.9); --glass-strong:rgba(26,18,32,.96); --glass-border:rgba(255,255,255,.09);
  --scrim:rgba(0,0,0,.62);
  --success:#34d399; --warn:#fbbf24; --danger:#f87171;
  --sh-1:0 1px 2px rgba(0,0,0,.4),0 4px 12px rgba(0,0,0,.3);
  --sh-2:0 2px 4px rgba(0,0,0,.45),0 12px 28px rgba(0,0,0,.45);
  --sh-3:0 4px 8px rgba(0,0,0,.5),0 20px 44px rgba(0,0,0,.6);
  --a-ink:#fda4af;
}
:root[data-theme="light"]{ color-scheme:light; }

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html,body{margin:0;height:100%}
[hidden]{display:none !important}
body{
  background:var(--bg);color:var(--text);
  font-family:var(--font);font-size:var(--fs-base);line-height:1.5;font-weight:500;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  height:100dvh;display:flex;flex-direction:column;overflow:hidden;overscroll-behavior-y:none;
}
h1,h2,h3{font-weight:800;letter-spacing:-.02em;line-height:1.2}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;touch-action:manipulation}
a{color:var(--a-ink)}

/* aurora: faint two-colour glow behind the top of every screen */
body::before{
  content:"";position:fixed;inset:0 0 auto 0;height:min(60vh,460px);z-index:-1;pointer-events:none;
  background:
    radial-gradient(60% 70% at 15% 0%,color-mix(in srgb,var(--a1-vivid) 20%,transparent),transparent 70%),
    radial-gradient(55% 65% at 90% 0%,color-mix(in srgb,var(--a2-vivid) 16%,transparent),transparent 70%);
}

:focus{outline:none}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
:root[data-theme="dark"] :focus-visible{outline-color:var(--a-ink)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) :focus-visible{outline-color:var(--a-ink)}}

.ic{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.ic.sm{width:18px;height:18px}

@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  :root{--glass:var(--surface);--glass-strong:var(--surface)}
}

@keyframes pop-in{from{opacity:0;transform:scale(.92) translateY(8px)}to{opacity:1;transform:none}}
@keyframes rise{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
@keyframes bubble-in{from{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:none}}
@keyframes float{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-6px) rotate(2deg)}}

/* ---------- theme control ---------- */
.theme-seg{display:flex;gap:4px;padding:4px;border-radius:var(--r-pill);background:var(--surface-2);border:1px solid var(--border)}
.theme-seg button{flex:1;min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:6px;border:0;border-radius:var(--r-pill);
  background:none;color:var(--muted);font:inherit;font-weight:700;font-size:14px}
.theme-seg button[aria-checked="true"]{background:var(--grad);color:#fff;box-shadow:var(--glow)}
.theme-seg button:focus-visible{outline:2px solid var(--a-ink);outline-offset:2px}

/* ---------- app bar ---------- */
header{
  position:relative;z-index:var(--z-bar);flex-shrink:0;
  display:flex;align-items:center;gap:var(--s-2);
  min-height:calc(var(--appbar-h) + var(--safe-t));
  padding:var(--safe-t) max(var(--s-3),var(--safe-r)) 0 max(var(--s-3),var(--safe-l));
  background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border-bottom:1px solid var(--glass-border);
}
.logo{width:34px;height:34px;border-radius:10px;flex:none;box-shadow:var(--glow);display:block}
/* Sub-views drop the logo so the title and New chat button have room. */
header:has(#back:not([hidden])) .logo{display:none}
header h1{font-size:19px;margin:0;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.iconbtn{
  position:relative;width:44px;height:44px;border:0;border-radius:14px;padding:0;flex:none;
  display:grid;place-items:center;background:transparent;color:var(--text);
  transition:transform var(--dur-1) var(--ease-out),background-color var(--dur-2);
}
@media (hover:hover){.iconbtn:hover{background:var(--surface-2)}}
.iconbtn:active{transform:scale(.9);background:var(--surface-3)}
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-height:44px;padding:8px 16px;border:0;border-radius:var(--r-pill);
  background:var(--grad);color:#fff;font-weight:700;font-size:14.5px;box-shadow:var(--glow);
  transition:transform var(--dur-1) var(--ease-out),filter var(--dur-2);
}
.btn .ic{width:18px;height:18px;stroke-width:2.4}
@media (hover:hover){.btn:hover:not(:disabled){filter:brightness(1.08) saturate(1.05)}}
.btn:active:not(:disabled){transform:scale(.96)}
.btn:disabled{opacity:.5;cursor:default}

/* ---------- menu ---------- */
#menuScrim{position:fixed;inset:0;z-index:calc(var(--z-menu) - 1);background:transparent}
.menu{
  position:fixed;z-index:var(--z-menu);min-width:250px;overflow:hidden;
  top:calc(var(--appbar-h) + var(--safe-t) - 4px);right:max(10px,var(--safe-r));
  background:color-mix(in srgb,var(--surface) 97%,transparent);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border:1px solid var(--glass-border);border-radius:var(--r-lg);box-shadow:var(--sh-3);
  transform-origin:top right;animation:pop-in var(--dur-2) var(--ease-spring);
}
.menu-head{padding:14px 16px 8px;font-weight:800;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.menu .theme-seg{margin:0 12px 14px}

/* ---------- panes ---------- */
main{
  flex:1;display:flex;min-height:0;
  padding-left:var(--safe-l);padding-right:var(--safe-r);
}
#appList,#threadList{
  width:100%;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  padding:12px 12px calc(76px + var(--safe-b));background:transparent;
}
/* Mobile is one pane at a time, chosen by data-view. */
#appList,#threadList{display:none}
#chatPane{flex:1;display:none;flex-direction:column;min-width:0;background:transparent}
main[data-view="apps"] #appList{display:block}
main[data-view="threads"] #threadList{display:block}
main[data-view="chat"] #chatPane{display:flex}

.list{display:flex;flex-direction:column;gap:10px}
.list > *{animation:rise var(--dur-3) var(--ease-out) both}
.list > :nth-child(2){animation-delay:30ms}.list > :nth-child(3){animation-delay:60ms}
.list > :nth-child(4){animation-delay:90ms}.list > :nth-child(5){animation-delay:120ms}
.list > :nth-child(6){animation-delay:150ms}.list > :nth-child(7){animation-delay:180ms}
.list > :nth-child(n+8){animation-delay:210ms}

.section-title{margin:14px 4px 2px;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.list > .section-title:first-child{margin-top:4px}

.row{
  position:relative;display:flex;align-items:center;gap:12px;min-height:60px;
  padding:12px 14px;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);box-shadow:var(--sh-1);cursor:pointer;font-size:15px;font-weight:700;
  transition:transform var(--dur-2) var(--ease-out),box-shadow var(--dur-2),border-color var(--dur-2);
}
@media (hover:hover){.row:hover{transform:translateY(-2px);box-shadow:var(--sh-2);border-color:color-mix(in srgb,var(--a1-vivid) 40%,var(--border))}}
.row:active{transform:scale(.982);box-shadow:var(--sh-1);transition-duration:var(--dur-1)}
.row.active{border-color:var(--a1-vivid);box-shadow:0 0 0 3px color-mix(in srgb,var(--a1-vivid) 22%,transparent)}
.row .avatar{
  width:40px;height:40px;border-radius:14px;flex:none;display:grid;place-items:center;
  background:var(--grad-soft);color:var(--a-ink);
}
.row .avatar.grad{background:var(--grad);color:#fff;box-shadow:var(--glow)}
.row .body{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.row .name{display:flex;align-items:center;flex-wrap:wrap;gap:2px 8px;min-width:0;line-height:1.3}
.row .who{min-width:0;overflow-wrap:anywhere}
.row .sub{color:var(--muted);font-size:13px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .chev{color:var(--muted);width:18px;height:18px;opacity:.7}
.flag{
  display:inline-flex;align-items:center;gap:4px;flex:none;font-size:12px;font-weight:700;line-height:1.2;
  padding:4px 9px;border-radius:var(--r-pill);background:var(--warn-soft);color:var(--warn);
}
.flag .ic{width:13px;height:13px;stroke-width:2.4}

.hint{padding:20px 12px;font-size:14px;font-weight:600;color:var(--muted);text-align:center}
.empty-state{display:flex;flex-direction:column;align-items:center;gap:8px;padding:48px 24px;color:var(--muted);text-align:center;font-weight:600}
.empty-state .big{
  width:84px;height:84px;margin-bottom:8px;border-radius:30px;display:grid;place-items:center;
  background:var(--grad-soft);color:var(--a-ink);
  box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--a1-vivid) 25%,transparent);
  animation:float 4.5s ease-in-out infinite;
}
.empty-state .big .ic{width:38px;height:38px;stroke-width:1.75}
.empty-state p{margin:0;max-width:30ch;font-size:15px}
#empty{flex:1}

/* ---------- chat ---------- */
#chatHead{
  display:flex;align-items:center;gap:8px;flex-shrink:0;
  margin:12px 12px 0;padding:10px 14px;border-radius:var(--r-md);
  background:var(--surface);border:1px solid var(--border);
  font-size:13.5px;font-weight:600;color:var(--muted);overflow-wrap:anywhere;
}
#chatHead .ic{color:var(--a-ink);width:18px}
#messages{
  flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  padding:14px 12px;display:flex;flex-direction:column;gap:10px;
}
.bubble{
  max-width:84%;padding:10px 14px;border-radius:20px;white-space:pre-wrap;
  font-size:15px;line-height:1.45;overflow-wrap:anywhere;animation:bubble-in var(--dur-2) var(--ease-out) both;
}
.bubble.user,.bubble.admin{align-self:flex-end;background:var(--grad);color:#fff;border-bottom-right-radius:6px;box-shadow:var(--glow)}
.bubble.agent{align-self:flex-start;background:var(--surface);color:var(--text);border:1px solid var(--border);border-bottom-left-radius:6px;box-shadow:var(--sh-1)}

#composer{
  display:flex;align-items:flex-end;gap:8px;flex-shrink:0;
  padding:10px max(10px,var(--safe-r)) calc(10px + var(--safe-b)) max(10px,var(--safe-l));
  background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border-top:1px solid var(--glass-border);
}
#composer textarea{
  flex:1;resize:none;min-height:48px;max-height:120px;padding:12px 16px;
  font-size:16px;line-height:1.35;color:var(--text);background:var(--surface-2);
  border:1.5px solid transparent;border-radius:24px;outline:none;
  transition:border-color var(--dur-2),box-shadow var(--dur-2),background-color var(--dur-2);
}
#composer textarea::placeholder{color:var(--muted);opacity:.85}
#composer textarea:focus{background:var(--surface);border-color:var(--a1-vivid);box-shadow:0 0 0 4px color-mix(in srgb,var(--a1-vivid) 24%,transparent)}
#composer #send{width:48px;min-height:48px;padding:0;border-radius:50%}
#composer #send .ic{width:20px;height:20px}

/* Lift the hub assistant above the composer in the chat view. */
:root:has(main[data-view="chat"]){
  --hub-agent-bottom:calc(84px + var(--safe-b));
}

/* ---------- auth notice ---------- */
.notice{margin:auto;max-width:340px;padding:32px 24px;text-align:center;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:var(--sh-2);font-weight:600}

/* ---------- desktop: three panes side by side ---------- */
@media (min-width:860px){
  #back{display:none !important}
  #appList{width:280px;flex-shrink:0;display:block !important}
  #threadList{width:330px;flex-shrink:0;display:block !important}
  #chatPane{display:flex !important}
  #messages,#chatHead{max-width:760px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-delay:0s !important;transition-duration:.01ms !important}
}