/* Devin — samma redaktionella minimalism som Svar, i mörkt läge.
   Bläck som bakgrund, papper som text, hårlinjer, en lerröd accent. */

@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/instrument-sans.woff2) format("woff2")}
@font-face{font-family:"Instrument Sans";font-style:italic;font-weight:400 700;font-display:swap;src:url(/fonts/instrument-sans-italic.woff2) format("woff2")}
@font-face{font-family:Fraunces;font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/fraunces.woff2) format("woff2")}
@font-face{font-family:Fraunces;font-style:italic;font-weight:100 900;font-display:swap;src:url(/fonts/fraunces-italic.woff2) format("woff2")}

:root{
  color-scheme:dark;
  --ink:#151412;          /* bakgrund */
  --ink-2:#1c1a17;        /* ytor */
  --ink-3:#242220;        /* upphöjda ytor */
  --paper:#faf8f4;        /* primär text */
  --paper-soft:#d6d1c7;   /* sekundär text */
  --stone:#9a948a;        /* dämpad text */
  --hair:#332f2a;         /* hårlinjer */
  --hair-strong:#4a453e;
  --clay:#a65a3f;         /* accent, avsluta samtal */
  --clay-soft:#d9927a;    /* accent på text */
  --sage:#8fbf8a;         /* redo/ansluten */
  --danger:#e3a08c;
  --serif:Fraunces,Georgia,"Times New Roman",serif;
  --sans:"Instrument Sans",-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",sans-serif;
  --call-size:248px;
  --mark-bg:var(--paper);
  --mark-fg:var(--ink);
  font-family:var(--sans);
  font-synthesis:none;
}
*{box-sizing:border-box}
body{margin:0;background:var(--ink);color:var(--paper);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:var(--paper);color:var(--ink)}
button,input,textarea{font:inherit;letter-spacing:inherit}
button{color:inherit;cursor:pointer;touch-action:manipulation}
button,a{-webkit-tap-highlight-color:transparent}
button:disabled{cursor:default}
button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--paper);outline-offset:4px}
button svg{width:22px;height:22px;flex-shrink:0}
[hidden]{display:none!important}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.sprite{position:absolute;width:0;height:0;overflow:hidden}

/* ---------- logga ---------- */
.mark{display:block;width:28px;height:28px;flex-shrink:0}
.wordmark{font-family:var(--serif);font-weight:420;font-size:22px;letter-spacing:.01em;line-height:1;color:var(--paper);font-variation-settings:"opsz" 36}
.brand{display:flex;align-items:center;gap:11px}

/* ---------- skal ---------- */
.app-shell{height:100vh;height:100dvh;min-height:320px;max-width:1040px;margin:auto;display:flex;flex-direction:column;position:relative;padding:env(safe-area-inset-top) max(24px,env(safe-area-inset-right)) 0 max(24px,env(safe-area-inset-left))}
.header{height:80px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;gap:20px}
.connection{display:flex;align-items:center;gap:8px;font-size:12px;letter-spacing:.02em;color:var(--stone)}
.status-dot{height:6px;width:6px;border-radius:50%;background:var(--stone)}
.connection[data-status="ready"] .status-dot{background:var(--sage)}
.connection[data-status="error"] .status-dot{background:var(--danger)}
.app-shell[data-view="call"] .connection{visibility:hidden}

/* ---------- samtalsvy ---------- */
.call-view{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;padding-bottom:max(16px,env(safe-area-inset-bottom))}
.realtime-panel{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;gap:28px;padding-bottom:12px}
.realtime-heading{text-align:center;height:108px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;width:100%;flex-shrink:0}
.realtime-copy{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%;min-height:78px}
.realtime-copy strong{display:block;font-family:var(--serif);font-weight:340;font-size:34px;line-height:1.15;letter-spacing:-.01em;color:var(--paper)}
.realtime-copy>span{color:var(--stone);font-size:16px;line-height:1.45;min-height:24px;max-width:370px}
.call-time{display:block;min-height:22px;margin-top:8px;font-size:13px;letter-spacing:.04em;color:var(--stone);font-variant-numeric:tabular-nums;line-height:22px}
.call-time[hidden]{display:block!important;visibility:hidden}
.call-actions{position:relative;display:grid;justify-items:center;gap:24px;flex-shrink:0}
.voice-button{width:var(--call-size);height:var(--call-size);border:0;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:14px;background:var(--paper);color:var(--ink);font-size:19px;font-weight:500;letter-spacing:.005em;position:relative;transition:background .22s,color .22s,transform .15s;isolation:isolate}
.voice-button:before{content:"";position:absolute;inset:-12px;border:1px solid rgba(250,248,244,.16);border-radius:50%;pointer-events:none;transition:opacity .2s,border-color .2s}
.voice-button svg{height:50px;width:50px}
.voice-button .end-call-icon{display:none}
.voice-button:disabled{opacity:.4}
.voice-button[aria-pressed="true"]{background:var(--clay);color:var(--paper)}
.voice-button[aria-pressed="true"]:before{border-color:rgba(166,90,63,.45)}
.voice-button[aria-pressed="true"] .call-icon{display:none}
.voice-button[aria-pressed="true"] .end-call-icon{display:block}
.voice-button:not(:disabled):active{transform:scale(.985)}.voice-button:focus-visible{outline-offset:16px}
.realtime-panel[data-phase="speaking"] .voice-button:before,.realtime-panel[data-phase="hearing"] .voice-button:before{animation:call-breathe 2.2s ease-in-out infinite}
.realtime-panel[data-phase="connecting"] .realtime-copy strong,.realtime-panel[data-phase="reconnecting"] .realtime-copy strong{animation:status-breathe 2s ease-in-out infinite}
.mute-slot{height:110px;min-width:176px;display:grid;place-items:center}
.mute-button{height:104px;min-width:176px;border:1px solid var(--hair-strong);border-radius:26px;background:transparent;color:var(--paper);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;font-size:15px;font-weight:500;transition:background .2s,color .2s,border-color .2s}
.mute-button:hover{border-color:var(--stone)}
.mute-button svg{height:30px;width:30px}
.mute-slash{display:none}
.mute-button[aria-pressed="true"]{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.mute-button[aria-pressed="true"] .mute-slash{display:block}
.realtime-panel[data-muted="true"] #realtime-hint{color:var(--clay-soft)}
.view-switch{display:flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:10px 14px;background:transparent;border:0;border-radius:12px;font-size:15px;color:var(--stone);flex-shrink:0;transition:color .2s}
.view-switch:hover{color:var(--paper)}
.view-switch svg{height:20px;width:20px}
.show-text{margin-top:8px}
.notice{position:absolute;z-index:5;top:76px;left:16px;right:16px;max-width:720px;margin:auto;display:flex;align-items:center;gap:12px;padding:12px 12px 12px 18px;border:1px solid #5a3f34;border-radius:14px;background:#2a1f1b;color:#f1dcd2;font-size:14px;line-height:1.5;box-shadow:0 12px 30px rgba(0,0,0,.4)}
.notice>span{flex:1}
.notice button{border:0;background:transparent;min-width:44px;min-height:44px;padding:8px;font-size:26px;color:inherit}

/* ---------- textvy ---------- */
.text-view{flex:1;min-height:0;display:flex;flex-direction:column;width:100%;max-width:800px;margin:auto}
.text-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid var(--hair);padding-bottom:10px;flex-shrink:0}
.show-call{padding-left:0;color:var(--paper-soft)}
.show-call>span:first-child{font-size:22px;line-height:1}
.icon-button{min-height:44px;display:flex;align-items:center;justify-content:center;gap:7px;border:1px solid var(--hair-strong);border-radius:999px;background:transparent;padding:8px 14px;font-size:13px;font-weight:500;color:var(--paper-soft);transition:border-color .2s,color .2s}
.icon-button:hover{border-color:var(--stone);color:var(--paper)}
.icon-button:disabled{opacity:.4}
.icon-button svg{width:16px;height:16px}
.conversation{flex:1;min-height:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--hair-strong) transparent;padding:0 4px;overscroll-behavior:contain}
.welcome{padding:54px 4px 30px;max-width:640px;margin:auto}
.welcome h1{font-family:var(--serif);font-weight:340;font-size:36px;line-height:1.1;letter-spacing:-.01em;margin:0 0 14px}
.welcome p{color:var(--stone);font-size:16px;line-height:1.6;margin:0}
.messages{padding-top:28px;max-width:740px;margin:auto}
.message{display:flex;gap:12px;margin-bottom:28px;animation:appear .18s ease-out}
.message.is-existing{animation:none}
.message-avatar{flex-shrink:0;width:28px;height:28px;display:block;margin-top:1px}
.message-avatar svg{width:28px;height:28px;display:block}
.message-body{min-width:0;max-width:calc(100% - 40px)}
.message-name{font-size:12px;font-weight:600;letter-spacing:.02em;color:var(--paper-soft);margin-bottom:8px}
.message-text{line-height:1.7;overflow-wrap:anywhere;font-size:15.5px;color:var(--paper)}
.message-text p{margin:0 0 12px;white-space:pre-wrap}
.message-text p:last-child{margin-bottom:0}
.message-text h2,.message-text h3,.message-text h4{font-family:var(--serif);font-weight:420;font-size:20px;line-height:1.35;margin:22px 0 10px}
.message-text h2:first-child,.message-text h3:first-child,.message-text h4:first-child{margin-top:0}
.message-text ul,.message-text ol{padding-left:22px;margin:10px 0 15px}
.message-text li{margin:4px 0;white-space:pre-wrap}
.message-text strong{font-weight:600}
.message-text code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;background:var(--ink-3);border-radius:4px;padding:2px 5px;font-size:.87em}
.message-text pre{white-space:pre;overflow:auto;padding:16px;background:var(--ink-2);border:1px solid var(--hair);border-radius:10px;line-height:1.55}
.message-text pre code{padding:0;background:transparent}
.message-text a{color:var(--paper);text-decoration-color:var(--stone);text-decoration-thickness:1px;text-underline-offset:3px;word-break:break-word}
.message-text a:hover{text-decoration-color:var(--paper)}
.message-text blockquote{border-left:2px solid var(--hair-strong);padding-left:14px;color:var(--paper-soft);margin:12px 0;white-space:pre-wrap}
.message.user{justify-content:flex-end}
.message.user .message-body{max-width:88%;padding:14px 18px;background:var(--ink-3);border-radius:18px 18px 4px 18px}
.message.user .message-text{white-space:pre-wrap;color:var(--paper)}
.message-tools{display:flex;gap:10px;margin-top:8px;align-items:center}
.play-answer{border:0;background:transparent;display:flex;align-items:center;gap:5px;color:var(--stone);font-size:12px;min-height:40px;padding:8px 0;transition:color .2s}
.play-answer:hover{color:var(--paper)}
.message-failure{color:var(--danger);font-size:13px;margin-top:8px}
.thinking{display:flex;gap:12px;align-items:center;margin:0 auto 28px;font-size:13px;color:var(--stone);max-width:740px}
.thinking-dots{width:28px;display:flex;gap:3px;align-items:center;justify-content:center}
.thinking-dots i{width:4px;height:4px;border-radius:50%;background:var(--paper);animation:status-breathe 1.5s ease-in-out infinite}
.thinking-dots i:nth-child(2){animation-delay:.15s}
.thinking-dots i:nth-child(3){animation-delay:.3s}

/* ---------- fördjupningar ---------- */
.background-region{flex-shrink:0}
.background-tasks{border:1px solid var(--hair);background:var(--ink-2);border-radius:14px;margin-top:4px}
.background-tasks>summary{min-height:46px;display:flex;align-items:center;gap:9px;padding:10px 14px;cursor:pointer;list-style:none;font-size:13px;font-weight:500}
.background-tasks>summary::-webkit-details-marker{display:none}
.task-mark{font-size:18px;line-height:1;color:var(--clay-soft)}
.task-summary{margin-left:auto;color:var(--stone);font-size:12px;font-weight:400}
.task-chevron{font-size:19px;color:var(--stone);transition:transform .2s}
.background-tasks[open] .task-chevron{transform:rotate(180deg)}
.task-list{max-height:min(28vh,230px);overflow:auto;padding:0 14px;overscroll-behavior:contain}
.task-card{padding:11px 0;border-top:1px solid var(--hair)}
.task-heading{display:flex;align-items:center;gap:10px}
.task-heading h2{font-size:13px;font-weight:500;line-height:1.45;flex:1;min-width:0;margin:0;overflow-wrap:anywhere}
.task-status{color:var(--paper-soft);font-size:11px;letter-spacing:.02em;white-space:nowrap}
.task-cancel{border:0;background:transparent;padding:6px 0;min-height:36px;font-size:12px;color:var(--paper-soft);text-decoration:underline;text-underline-offset:3px}
.task-cancel:disabled{opacity:.6}
.task-progress{font-size:12px;color:var(--stone);line-height:1.6;margin:5px 0 0;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.task-card[data-status="failed"] .task-progress{color:var(--danger)}
.task-result{margin-top:7px}
.task-result>summary{cursor:pointer;font-size:12px;color:var(--clay-soft);width:fit-content;padding:8px 0}
.task-result .message-text{font-size:13px;padding:10px 0 3px}

/* ---------- skrivfält ---------- */
.composer-region{flex-shrink:0;padding:12px 0 max(18px,env(safe-area-inset-bottom))}
.composer{background:var(--ink-2);border:1px solid var(--hair-strong);border-radius:20px;padding:15px 14px 10px;transition:border-color .2s}
.composer:focus-within{border-color:var(--stone)}
.composer textarea{resize:none;display:block;width:100%;border:0;outline:none;color:var(--paper);background:transparent;font-size:16px;line-height:1.5;padding:0 2px;min-height:28px;max-height:160px}
.composer textarea::placeholder{color:var(--stone)}
.composer-controls,.send-controls{display:flex;align-items:center;justify-content:flex-end;gap:9px}
.composer-controls{margin-top:12px}
.deepen-button{border:1px solid var(--hair-strong);border-radius:999px;background:transparent;min-height:42px;padding:8px 14px;font-size:12.5px;font-weight:500;white-space:nowrap;color:var(--paper-soft);transition:border-color .2s,color .2s}
.deepen-button:not(:disabled):hover{border-color:var(--stone);color:var(--paper)}
.deepen-button:disabled{opacity:.38}
.read-aloud-toggle{display:flex;align-items:center;gap:5px;border:0;background:transparent;color:var(--stone);font-size:12.5px;font-weight:500;min-height:42px;padding:8px 8px;border-radius:999px;transition:color .2s,background .2s}
.read-aloud-toggle svg{width:18px;height:18px}
.read-aloud-toggle[aria-pressed="true"]{color:var(--paper);background:var(--ink-3)}
.send-button{height:44px;width:44px;display:grid;place-items:center;border:0;border-radius:50%;background:var(--paper);color:var(--ink);transition:background .2s,color .2s}
.send-button:disabled{background:var(--ink-3);color:var(--stone)}
.composer-caption{display:flex;justify-content:space-between;gap:12px;font-size:11px;letter-spacing:.01em;color:var(--stone);padding:9px 2px 0;line-height:1.4}
.pending-messages{margin:7px 3px 0;font-size:12px;line-height:1.5;color:var(--paper-soft)}
.voice-playback{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 3px 10px;font-size:12px;color:var(--paper-soft)}
.voice-playback button{background:transparent;border:0;text-decoration:underline;text-underline-offset:3px;font-size:12px;padding:8px 0;color:inherit}

/* ---------- pinkod ---------- */
.login-screen{min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:max(32px,env(safe-area-inset-top)) max(26px,env(safe-area-inset-left)) max(32px,env(safe-area-inset-bottom))}
.login-card{width:100%;max-width:360px;text-align:center}
.login-brand{display:flex;justify-content:center;margin-bottom:34px}
.login-brand .mark{width:64px;height:64px}
.login-card h1{font-family:var(--serif);font-weight:340;font-size:44px;line-height:1.05;letter-spacing:-.01em;margin:0 0 12px}
.login-card>p{color:var(--stone);font-size:16px;line-height:1.6;margin:0 0 30px}
.pin-input{display:block;width:100%;height:76px;background:var(--ink-2);border:1px solid var(--hair-strong);border-radius:16px;padding:0 0 0 .5em;outline:none;text-align:center;font-size:32px;font-weight:500;letter-spacing:.5em;font-variant-numeric:tabular-nums;color:var(--paper);caret-color:var(--paper);transition:border-color .2s}
.pin-input:focus{border-color:var(--paper)}.pin-input:focus-visible{outline:none}
.pin-input::placeholder{color:var(--hair-strong);letter-spacing:.5em}
.login-submit{display:flex;justify-content:center;align-items:center;gap:8px;width:100%;min-height:58px;border:0;border-radius:16px;background:var(--paper);color:var(--ink);padding:15px 17px;margin-top:14px;font-size:16px;font-weight:500;transition:opacity .2s}
.login-submit:disabled{opacity:.5}
.login-card .login-error{font-size:14px;color:var(--danger);margin:14px 0 0}

@keyframes call-breathe{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:1;transform:scale(1.03)}}
@keyframes status-breathe{0%,100%{opacity:.62}50%{opacity:1}}
@keyframes appear{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}

/* ---------- små skärmar ---------- */
@media(max-width:640px){:root{--call-size:clamp(208px,62vw,248px)}.app-shell{padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right))}.header{height:68px}.wordmark{font-size:21px}.mark{width:26px;height:26px}.realtime-copy strong{font-size:30px}.realtime-copy>span{font-size:15px;max-width:300px}.voice-button{font-size:18px}.conversation{padding:0}.messages{padding-top:22px}.message{gap:8px}.message-avatar,.message-avatar svg{height:24px;width:24px}.message-body{max-width:calc(100% - 32px)}.message-text{font-size:15px}.message.user .message-body{padding:12px 15px}.composer-caption #composer-hint{display:none}.composer-caption{justify-content:flex-end}.read-aloud-toggle span{display:none}.text-toolbar{gap:8px}.notice{top:64px}.show-call{font-size:14px}.view-switch{min-height:48px}.login-card h1{font-size:40px}}
@media(max-width:350px){.app-shell{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}.realtime-copy strong{font-size:27px}.realtime-copy>span{font-size:14px}.voice-button{font-size:17px}.mute-slot{min-width:160px}.mute-button{min-width:160px}.new-chat{padding:8px 12px;font-size:12px}.welcome h1{font-size:30px}.login-card h1{font-size:36px}}
@media(max-height:700px) and (orientation:portrait){:root{--call-size:216px}.header{height:54px}.realtime-panel{gap:18px;padding-bottom:0}.realtime-heading{height:82px}.realtime-copy{min-height:58px;gap:6px}.realtime-copy strong{font-size:28px}.realtime-copy>span{font-size:14px}.call-time{margin-top:2px;font-size:13px}.call-actions{gap:18px}.mute-slot{height:100px}.mute-button{height:96px}.call-view{padding-bottom:max(8px,env(safe-area-inset-bottom))}.show-text{margin-top:0}.notice{top:51px}}
@media(max-height:570px) and (orientation:portrait){:root{--call-size:200px}.header{height:48px}.realtime-panel{gap:12px}.realtime-heading{height:74px}.realtime-copy strong{font-size:26px}.call-actions{gap:12px}.mute-slot{height:96px}.mute-button{height:92px}.voice-button svg{height:44px;width:44px}.voice-button{font-size:17px;gap:12px}}
@media(orientation:landscape) and (max-height:550px){:root{--call-size:200px}.header{height:42px}.call-view{padding-bottom:max(4px,env(safe-area-inset-bottom))}.realtime-panel{gap:8px;padding:0}.realtime-heading{height:56px;position:relative}.realtime-copy{min-height:0;gap:4px}.realtime-copy strong{font-size:26px}.realtime-copy>span{font-size:13px;min-height:19px}.call-time{position:absolute;left:calc(50% + 160px);top:8px;margin:0;font-size:13px}.call-actions{gap:0}.mute-slot{position:absolute;left:calc(50% + 125px);top:50%;transform:translateY(-50%);min-width:112px;height:112px}.mute-button{min-width:112px;width:112px;height:104px;font-size:13px;border-radius:22px}.voice-button{gap:12px;font-size:17px}.voice-button svg{height:45px;width:45px}.show-text{min-height:42px;margin:0;font-size:13px}.show-text svg{height:18px;width:18px}.notice{top:43px}.text-toolbar{padding-bottom:4px}.composer-region{padding-top:7px;padding-bottom:max(6px,env(safe-area-inset-bottom))}.composer{padding-top:10px}.composer-controls{margin-top:7px}.composer-caption{display:none}.welcome{padding-top:20px}.task-list{max-height:26vh}}
@media(orientation:landscape) and (max-height:360px){:root{--call-size:180px}.header{height:34px}.wordmark{font-size:18px}.mark{width:22px;height:22px}.realtime-heading{height:49px}.realtime-panel{gap:6px}.realtime-copy strong{font-size:24px}.voice-button{font-size:16px}.voice-button svg{height:40px;width:40px}.mute-slot{left:calc(50% + 113px)}.show-text{min-height:38px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}