/* ============================================================
   OUPI — Maquette UX · shell commun (tokens, chrome, composer, dock)
   Chargé par toutes les surfaces. Les classes sont stables : à animer
   via data-state / classes .is-* sans toucher au markup.
   ============================================================ */
:root{
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);

  /* Couleurs */
  --bg:#f6f7f5; --surface:#fff; --surface-2:#fafaf9;
  --line:#e6e7e4; --line-soft:#eeefec;
  --text:#1f2421; --text-2:#5c635e; --text-3:#9aa19c;
  --rail:#2a3527; --rail-line:#3b4737; --edge:#242a10; --edge-text:#cfd5c3; --edge-on:rgba(255,255,255,.14); --accent:#4f7a4a;
  --purple:#6f4fd6; --purple-bg:#efe9ff;
  --green-pill:#e7f2e5; --green-pill-text:#3b6a35;
  --user-bubble:#eceeeb; --danger:#e5484d; --amber:#f3b13b;
  --shadow:0 8px 30px rgba(20,30,20,.08); --shadow-sm:0 2px 8px rgba(20,30,20,.06);
  --blob-a:rgba(150,200,120,.45); --blob-b:rgba(255,190,190,.45); --blob-c:rgba(255,235,150,.55);

  /* Rythme */
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:22px;
  --topbar-h:46px; --topbar-top:14px; --topbar-w:1000px; --rail-w:44px; --edge-w:52px;
  /* centre de la zone de contenu (à droite du bord vert) */
  --content-mid:calc(var(--edge-w) + (100% - var(--edge-w)) / 2);
  --font:Inter,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  --t-fast:160ms cubic-bezier(.2,.7,.2,1); --t-med:280ms cubic-bezier(.2,.7,.2,1);
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  --bg:#161917;--surface:#1f2320;--surface-2:#242925;--line:#2f3531;--line-soft:#292e2a;
  --text:#eef1ec;--text-2:#b8bfb8;--text-3:#7d857e;--rail:#0f1310;--rail-line:#26302a;
  --user-bubble:#2b302c;--purple-bg:#2d2547;--green-pill:#22301f;--green-pill-text:#a8d39f;
  --shadow:0 8px 30px rgba(0,0,0,.4);--shadow-sm:0 2px 8px rgba(0,0,0,.3);
  --blob-a:rgba(90,140,70,.25);--blob-b:rgba(180,90,110,.2);--blob-c:rgba(190,160,60,.2);}}
:root[data-theme="dark"]{
  --bg:#161917;--surface:#1f2320;--surface-2:#242925;--line:#2f3531;--line-soft:#292e2a;
  --text:#eef1ec;--text-2:#b8bfb8;--text-3:#7d857e;--rail:#0f1310;--rail-line:#26302a;
  --user-bubble:#2b302c;--purple-bg:#2d2547;--green-pill:#22301f;--green-pill-text:#a8d39f;
  --shadow:0 8px 30px rgba(0,0,0,.4);--shadow-sm:0 2px 8px rgba(0,0,0,.3);
  --blob-a:rgba(90,140,70,.25);--blob-b:rgba(180,90,110,.2);--blob-c:rgba(190,160,60,.2);}

html{scroll-padding-top:env(safe-area-inset-top,0px);height:100%}
*,*::before,*::after{box-sizing:inherit}
body{margin:0;height:100%;font-family:var(--font);font-size:14px;color:var(--text);background:var(--bg);overflow:hidden;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
button:focus-visible{outline:2px solid var(--purple);outline-offset:2px}
svg{display:block}
.app{position:relative;height:100%;overflow:hidden}

/* Fond dégradé */
.bg{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.bg::before,.bg::after,.bg .blob{content:"";position:absolute;border-radius:50%;filter:blur(90px)}
.bg::before{width:900px;height:600px;left:-200px;top:-250px;background:radial-gradient(closest-side,var(--blob-a),transparent 70%)}
.bg .blob{width:500px;height:450px;left:-120px;top:60px;background:radial-gradient(closest-side,var(--blob-b),transparent 70%)}
.bg::after{width:900px;height:500px;left:35%;top:-320px;background:radial-gradient(closest-side,var(--blob-c),transparent 70%)}

/* Bord gauche : barre verte permanente (menu, Oupi, Activity, Tools, Settings, Help) */
.edge{position:absolute;left:0;top:0;bottom:0;width:var(--edge-w);background:var(--edge);z-index:7;display:flex;flex-direction:column;align-items:center;padding:12px 0}
.edge button{width:44px;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 0;border-radius:9px;color:var(--edge-text);font-size:9px;letter-spacing:.01em;transition:background var(--t-fast),color var(--t-fast)}
.edge button:hover{background:rgba(255,255,255,.08);color:#fff}
.edge button.is-active{background:var(--edge-on);color:#fff}
.edge .e-menu{padding:6px 0}
.edge .e-main{margin:auto 0;display:flex;flex-direction:column;gap:6px}
.edge .e-help{margin-top:0}

/* Barre haute */
.topbar{position:absolute;top:var(--topbar-top);left:var(--content-mid);transform:translateX(-50%);width:var(--topbar-w);max-width:calc(100% - var(--edge-w) - 40px);height:var(--topbar-h);background:var(--surface);border:1px solid var(--line);border-radius:14px;display:flex;align-items:center;padding:0 12px;z-index:5;box-shadow:var(--shadow-sm)}
.topbar .grp{display:flex;align-items:center;gap:14px;flex:1;min-width:0}
.topbar .grp.right{justify-content:flex-end;gap:16px}
.tb-item{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--text);white-space:nowrap}
.tb-item.dim{color:var(--text-3)}
.tb-item .sep{width:1px;height:16px;background:var(--line)}
.grid-btn{width:24px;height:24px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;color:var(--text-2)}
.logo{position:absolute;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:4px;font-family:Georgia,"Times New Roman",serif;font-size:17px;color:var(--text)}
.icon-btn{width:28px;height:28px;display:grid;place-items:center;color:var(--text-2);border-radius:var(--r-sm);position:relative;transition:background var(--t-fast)}
.icon-btn:hover{background:var(--surface-2)}
.icon-btn .dot{position:absolute;top:3px;right:4px;width:6px;height:6px;border-radius:50%;background:var(--danger)}
.avatar{width:26px;height:26px;border-radius:50%;background:conic-gradient(from 90deg,#7fb3d5,#5b7bd8,#8ad0a3,#7fb3d5);box-shadow:inset 0 0 0 2px var(--surface)}

/* Rail vertical + pastille tâches */
.rail{position:absolute;left:calc(var(--edge-w) + 10px);top:50%;transform:translateY(-50%);width:var(--rail-w);background:var(--rail);border-radius:14px;padding:10px 0;display:flex;flex-direction:column;align-items:center;gap:6px;z-index:6;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.rail button{width:32px;height:32px;border-radius:var(--r-sm);display:grid;place-items:center;color:#c9d2c4;transition:background var(--t-fast)}
.rail button:hover,.rail button.is-active{background:rgba(255,255,255,.08);color:#fff}
.rail .div{width:20px;height:1px;background:var(--rail-line);margin:4px 0}
.tasks-fab{position:absolute;left:26px;bottom:22px;width:44px;height:44px;border-radius:50%;background:var(--rail);display:grid;place-items:center;color:#fff;z-index:6;box-shadow:0 6px 16px rgba(0,0,0,.3)}
.tasks-fab .badge{position:absolute;top:-4px;right:-6px;background:var(--amber);color:#1f2421;font-size:9px;font-weight:600;padding:1px 4px;border-radius:8px}

/* Logo particules */
.particles{width:64px;height:64px}
.corner-logo{position:absolute;right:52px;bottom:52px;width:34px;height:34px;opacity:.9;z-index:3}

/* Composer */
.composer{position:absolute;left:var(--content-mid);transform:translateX(-50%);bottom:86px;width:min(660px,calc(100% - 120px));background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);padding:10px 14px;box-shadow:var(--shadow);z-index:4;transition:left var(--t-med),bottom var(--t-med)}
.composer.is-home{bottom:80px}
.chip{display:inline-flex;align-items:center;gap:6px;background:var(--purple-bg);color:var(--purple);font-size:10.5px;font-weight:600;padding:3px 8px;border-radius:7px}
.chip span{opacity:.6;font-weight:500}
.composer .input{margin:10px 2px 8px;color:var(--text-3);font-size:12.5px;min-height:20px}
.composer .tools{display:flex;align-items:center;justify-content:space-between}
.composer .tools .l,.composer .tools .r{display:flex;align-items:center;gap:6px}
.composer .tools button{width:26px;height:26px;display:grid;place-items:center;border-radius:7px;color:var(--text-2);position:relative}
.composer .tools button:hover{background:var(--surface-2)}
.composer .tools button[data-count]::after{content:attr(data-count);position:absolute;top:-6px;right:-6px;background:var(--purple);color:#fff;font-size:8px;font-weight:600;padding:1px 4px;border-radius:7px}
.send{width:30px!important;height:30px!important;border-radius:50%!important;background:var(--user-bubble)!important;color:var(--text)!important;margin-left:6px}
.composer .tools .oupi-btn{width:24px;height:24px;border-radius:50%;background:#1b200b;margin-left:4px}
.composer .tools .oupi-btn:hover{background:#2b331a}
.composer .tools .oupi-btn img{width:11px;height:auto}
.resize{position:absolute;right:8px;bottom:36px;width:8px;height:8px;border-right:1px solid var(--text-3);border-bottom:1px solid var(--text-3);opacity:.6}

/* Dock bas */
.dock{position:absolute;left:var(--content-mid);transform:translateX(-50%);bottom:12px;background:var(--rail);border-radius:var(--r-lg);padding:8px 10px;display:flex;gap:6px;z-index:7;box-shadow:0 10px 30px rgba(0,0,0,.3)}
.dock button{width:42px;display:flex;flex-direction:column;align-items:center;gap:4px;color:#d7ded2;font-size:8.5px}
.dock button i{width:26px;height:26px;border-radius:7px;background:rgba(255,255,255,.06);display:grid;place-items:center;transition:background var(--t-fast)}
.dock button:hover i,.dock button.is-active i{background:rgba(255,255,255,.16)}
.dock button span{max-width:42px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Boutons génériques */
.btn{border:1px solid var(--line);border-radius:var(--r-sm);padding:6px 12px;font-size:11.5px;background:var(--surface)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:500}

/* Navigation entre surfaces (outil de maquette, à retirer en prod) */
.mock-nav{position:absolute;top:70px;right:22px;z-index:9;display:flex;gap:4px;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:3px;box-shadow:var(--shadow-sm);font-size:11px}
.mock-nav a{padding:5px 10px;border-radius:7px;color:var(--text-2);text-decoration:none}
.mock-nav a.on{background:var(--text);color:var(--bg)}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}
@media (max-width:800px){
  .topbar .tb-item.dim,.topbar .tb-item .sep{display:none}
  .composer,.composer.is-home{width:calc(100% - var(--edge-w) - 80px)}
}
.mock-nav select{font:inherit;font-size:11px;color:var(--text);background:var(--surface);border:0;padding:4px 6px;border-radius:7px;max-width:260px}
/* Marque */
.logo{position:absolute;left:50%;transform:translateX(-50%);display:flex;align-items:center;height:100%}
.logo .wm{height:15px;width:auto;display:block}
.logo .wm-dark{display:none}
:root[data-theme="dark"] .logo .wm-light{display:none}
:root[data-theme="dark"] .logo .wm-dark{display:block}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .logo .wm-light{display:none}:root:not([data-theme="light"]) .logo .wm-dark{display:block}}
.corner-logo.brand{border-radius:9px;opacity:1;width:30px;height:30px}
.ed-foot .mk{height:10px;vertical-align:middle;margin-right:4px}
.topbar.studio .logo .wm{height:14px}
.orb{width:64px;height:64px;border-radius:50%;background:#1b200b;display:grid;place-items:center;box-shadow:0 10px 30px rgba(27,32,11,.25)}
.orb img{width:30px;height:auto}
.as-orb .orb{margin:0 auto;width:70px;height:70px}
/* Orbe de coin (bas droite) : la nuée seule, posée sur le fond, sans disque */
.corner-orb{position:absolute;right:22px;bottom:22px;width:60px;height:60px;border-radius:50%;background:transparent;display:grid;place-items:center;z-index:8;overflow:hidden;transition:transform var(--t-fast)}
.corner-orb:hover{transform:scale(1.06)}
.corner-orb canvas{width:60px;height:60px;display:block}
/* Orbe d'accueil : même nuée, plus grande, sans disque */
.home-orb{width:96px;height:96px;display:block}

/* Côté droit de la barre haute : jauge de crédits, langue, avatar marque */
.credit{display:flex;align-items:center;gap:8px;padding:3px 10px 3px 4px;border-radius:12px;transition:background var(--t-fast);text-align:left}
.credit:hover,.credit.is-open{background:var(--surface-2)}
.ring{width:18px;height:18px;flex:none}
.ring circle{fill:none;stroke-width:3}
.ring .tr{stroke:var(--line)}
.ring .val{stroke:#5f7a2a;stroke-linecap:round;transform:rotate(-90deg);transform-origin:50% 50%}
.credit b{display:block;font-size:10.5px;font-weight:500;line-height:1.1}
.credit small{display:block;font-size:9.5px;color:var(--text-2);line-height:1.2;white-space:nowrap}
.tb-sep{width:1px;height:18px;background:var(--line)}
.lang{display:flex;align-items:center;gap:3px;font-size:11.5px;font-weight:600;color:var(--text)}
.lang svg{opacity:.6}
.avatar.brand{background:#1b200b;box-shadow:none;display:grid;place-items:center}
.avatar.brand img{width:13px;height:auto}