/* ═══════════════════════ Fonts ═══════════════════════ */

@font-face{font-family:"Fira Sans";font-style:normal;font-weight:300;src:url("../fonts/fira-sans-latin-300-normal.woff2") format("woff2");font-display:swap}
@font-face{font-family:"Fira Sans";font-style:normal;font-weight:400;src:url("../fonts/fira-sans-latin-400-normal.woff2") format("woff2");font-display:swap}
@font-face{font-family:"Fira Sans";font-style:normal;font-weight:500;src:url("../fonts/fira-sans-latin-500-normal.woff2") format("woff2");font-display:swap}
@font-face{font-family:"Fira Sans";font-style:normal;font-weight:600;src:url("../fonts/fira-sans-latin-600-normal.woff2") format("woff2");font-display:swap}
@font-face{font-family:"Fira Sans";font-style:normal;font-weight:700;src:url("../fonts/fira-sans-latin-700-normal.woff2") format("woff2");font-display:swap}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;src:url("../fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");font-display:swap}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;src:url("../fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");font-display:swap}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:600;src:url("../fonts/ibm-plex-mono-latin-600-normal.woff2") format("woff2");font-display:swap}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:700;src:url("../fonts/ibm-plex-mono-latin-700-normal.woff2") format("woff2");font-display:swap}

/* ═══════════════════════ Variables & Theme ═══════════════════════ */

:root{--sync-priority:0;
--bg:#fff;--fg:#1a1a1a;--surface:#f5f5f5;--surface-hover:#eee;--surface-offset:#fafafa;
--border:#e5e5e5;--muted:#6d6d6d;--accent:#6400ff;--danger:#d33;--success:#2ba14b;
--radius:8px;--shadow-sm:0 1px 4px rgba(0,0,0,.08);--shadow:0 4px 16px rgba(0,0,0,.1);
--shadow-modal:0 16px 64px rgba(0,0,0,.22),0 4px 16px rgba(0,0,0,.08);
--font-mono:"IBM Plex Mono","SF Mono",Menlo,Monaco,Consolas,monospace;
--opacity-hover:.9;--opacity-disabled:.4;--opacity-muted:.5;
--z-base:1;--z-dropdown:5;--z-sticky:10;--z-overlay:100;--z-modal:9998;--z-toast:99999;
--white:#fff;--black:#000;--shadow-menu:0 4px 24px rgba(0,0,0,.14),0 0 0 1px rgba(0,0,0,.06);
--fs-xs:9px;--fs-sm:10px;--fs-base:14px;--fs-lg:15px;--fs-xl:17px;--fs-2xl:20px;
--font:"Fira Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
--transition-fast:.12s ease;--transition:.2s ease;--transition-slow:.35s cubic-bezier(.16,1,.3,1)
}

@media (prefers-color-scheme:dark){:root{
--bg:#151515;--fg:#e5e5e5;--surface:#313131;--surface-hover:#2a2a2a;
--surface-offset:#1c1c1c;--border:#333;--muted:#666;--danger:#f44;--accent:#a277ff
}}
[data-theme="dark"]{
--bg:#151515;--fg:#e5e5e5;--surface:#313131;--surface-hover:#2a2a2a;
--surface-offset:#1c1c1c;--border:#333;--muted:#666;--danger:#f44;--accent:#a277ff
}

/* ═══════════════════════ Reset ═══════════════════════ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
::-webkit-scrollbar{display:none}
*{scrollbar-width:none}

html{background:#0d0d0d}html,body{touch-action:manipulation;height:100%;overflow:hidden}
body{
font-family:var(--font);font-size:var(--fs-base);background:var(--bg);color:var(--fg);
-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
line-height: 1.75;
}

::selection{background:color-mix(in srgb,var(--accent) 25%,transparent);color:var(--fg)}
img{max-width:100%;height:auto}
svg{display:block}
code{font-family:var(--font-mono);font-size:var(--fs-base)}

/* ═══════════════════════ Shared Form Elements ═══════════════════════ */

input,textarea,select{
border:1px solid var(--border);border-radius:var(--radius);padding:0 12px;
font-size:var(--fs-base);font-family:inherit;background:var(--surface);color:var(--fg);
outline:none;width:100%;transition:background var(--transition-fast)
}
:is(input,textarea,select):focus{background:var(--surface-hover)}
:is(input,textarea,select)::placeholder{color:var(--muted)}
input{height:34px}
textarea{resize:none;padding:8px 12px}

button{
display:inline-flex;align-items:center;justify-content:center;
border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;
font-family:inherit;font-size:var(--fs-base);color:var(--fg);background:var(--surface);
transition:background var(--transition-fast),color var(--transition-fast),opacity var(--transition-fast),border-color var(--transition-fast),transform var(--transition-fast);
flex-shrink:0;width:36px;height:36px
}
button:hover{background:var(--surface-hover)}
button:active:not(:disabled){transform:scale(.97)}
button:disabled{opacity:var(--opacity-disabled);cursor:default;filter:grayscale(.5)}
button:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 40%,transparent);outline-offset:2px}

kbd{
display:inline-block;font-family:var(--font-mono);font-size:var(--fs-base);
padding:2px 7px;border-radius:var(--radius);border:1px solid var(--border);
background:var(--surface);color:var(--muted)
}

/* ═══════════════════════ Theme Icons ═══════════════════════ */

.icon{display:block;flex-shrink:0}
[data-theme="dark"] .icon-sun,[data-theme="light"] .icon-moon{display:none}
[data-theme="dark"] .icon-moon,[data-theme="light"] .icon-sun{display:block}

/* Smooth theme transitions */
body,#layout,#sidebar,#editor,input,textarea,button,.msg,.card{
transition:background-color var(--transition),color var(--transition),border-color var(--transition)
}

/* ═══════════════════════ Animations ═══════════════════════ */

@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes fadeInUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideIn{from{opacity:0;transform:translateY(24px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(-360deg)}}

/* ═══════════════════════ Spinners ═══════════════════════ */

.spinner,.spinner-sm{display:inline-block;border:2px solid var(--muted);border-radius:50%;vertical-align:middle}
.spinner,.spinner-sm{border-top-color:var(--accent)}
.spinner{width:16px;height:16px;animation:spin .7s cubic-bezier(.4,0,.2,1) infinite;margin-left:4px}
.spinner-sm{width:10px;height:10px;animation:spin .8s linear infinite;margin-right:8px}


/* ═══════════════════════ Shared Overlay (for <dialog> elements) ═══════════════════════ */

dialog.overlay{border:none;background:transparent;padding:0;margin:auto;font-family:var(--font);color:var(--fg)}
dialog.overlay::backdrop{backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}

/* ═══════════════════════ Card ═══════════════════════ */

.card{
background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);
padding:24px;animation:slideIn var(--transition-slow);color:var(--fg)
}
.card h2{font-size:var(--fs-xl);font-weight:700;margin-bottom:16px}

/* ═══════════════════════ Utility: Prevent text selection ═══════════════════════ */

.noselect,#sidebar,#chat-list-panel{user-select:none;-webkit-user-select:none}

/* ═══════════════════════ Shared: Add / New Chat buttons ═══════════════════════ */

#add-btn,#chat-new-btn{
width:30px;height:30px;border-radius:50%;
background:var(--accent);color:var(--white);border-color:transparent
}
#add-btn:hover,#chat-new-btn:hover{opacity:var(--opacity-hover);background:var(--accent)}
#add-btn:active,#chat-new-btn:active{transform:scale(.95)}

/* ═══════════════════════ Embedded Media ═══════════════════════ */

.embedded-media{max-width:100%;height:auto;display:block;border-radius:8px;margin:8px 0}
.embedded-iframe{width:100%;aspect-ratio:16/9;border:none;border-radius:8px}
video.embedded-media{max-width:100%;border-radius:8px}
audio.embedded-media{width:100%;max-width:480px;height:40px;border-radius:8px}
.mobile-back-btn{display:none}

/* ── Media download button ── */
.media-wrapper{position:relative;display:inline-block;max-width:100%}
.media-wrapper .embedded-media,
.media-wrapper img,
.media-wrapper video,
.media-wrapper audio{margin:0}
.media-download-btn{position:absolute;top:6px;right:6px;width:28px;height:28px;border-radius:var(--radius);background:var(--surface);color:var(--fg);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .15s;cursor:pointer;z-index:var(--z-base);text-decoration:none}
.media-wrapper:hover .media-download-btn,
.media-download-btn:focus-visible{opacity:1}
.media-download-btn:hover{background:var(--surface-hover)}

/* ═══════════════════════ Print Styles ═══════════════════════ */

@media print{
  /* Reset page */
  @page{margin:1in;size:auto}
  html,body{height:auto;overflow:visible!important;background:var(--white)!important;color:var(--black)!important}

  /* Hide UI chrome */
  #left-strip,#sidebar,#chat-list-panel,
  #chat-view-input,.view-page-header,.chat-view-header,
  dialog,#toast-container,#context-menu,
  .scroll-btn,.modal-overlay,#editor-chat .chat-view-input,
  #svg-sprite{display:none!important}

  /* Layout: full-width, no grid */
  #layout{display:block!important;height:auto!important;padding:0!important}

  /* Editor content — centered with max-width */
  #editor{display:block!important;height:auto!important;overflow:visible!important}
  #editor-container{display:flex!important;overflow:visible!important}
  #editor-empty{display:none!important}
  #editor-textarea{max-width:100%!important;width:100%!important;padding:0!important;overflow:visible!important;margin:0 auto!important}

  /* View pages — centered with max-width */
  .view-page{display:block!important;overflow:visible!important;height:auto!important}
  .view-page-body{max-width:100%!important;width:100%!important;padding:0!important;overflow:visible!important;margin:0 auto!important}

  /* Chat messages — centered with max-width */
  #editor-chat{display:flex!important;overflow:visible!important;height:auto!important}
  #chat-messages{overflow:visible!important}

  /* Typography */
  body{font-size:12pt;line-height:1.6}
  pre,code,blockquote,.callout{background:transparent!important;border-color:#ccc!important}
  a{color:var(--black)!important;text-decoration:underline}

  /* Avoid page breaks inside blocks */
  pre,blockquote,.callout,table,img,video,.wysiwyg-block,.mermaid{break-inside:avoid;page-break-inside:avoid}
  h1,h2,h3,h4,h5,h6{break-after:avoid;page-break-after:avoid}
}

/* ═══════════════════════ Common Patterns ═══════════════════════ */
.note-title,.chat-title,.panel-title,.library-item-name,.tool-row-name,.think-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.callout-title,.file-attachment,.chat-date-separator,.library-td-name,.library-filters,.library-header-actions{display:flex;align-items:center;gap:6px}
:is(#note-list>[data-id],#chat-list>[data-chat-id],.slash-item,.tool-row-bar,.modal-overlay .results>div,.library-table tbody tr,.wysiwyg-table tbody tr,#context-menu .item,#context-menu .submenu>div,#strip-profile):hover{background:var(--surface-hover)}
:is(.scroll-btn,.item-action,.msg-action-btn,.lib-action-btn,.lib-view-btn,.lib-row-menu-btn,.lib-filter-pill,.modal-close,.confirm-actions .btn-cancel):hover{color:var(--fg)}

/* ═══════════════════════ Editor Layout ═══════════════════════ */
#editor{display:grid;grid-template-rows:auto 1fr;height:100%;min-width:0;overflow:hidden;position:relative;grid-row:1;grid-column:3}
#editor-container{display:none;flex-direction:column;overflow:hidden;grid-row:2;animation:fadeIn var(--transition) ease;position:relative}
#editor-container.active{display:flex}
#editor-empty{grid-row:2;display:flex;flex:1;align-items:center;justify-content:center;text-align:center;padding:2rem;animation:fadeInUp var(--transition-slow)}
#editor-textarea{flex:1;display:block;width:100%;max-width:80ch;margin:0 auto;border:none;outline:none;padding:max(14vmin,60px) 7vmin max(14vmin,60px);background:transparent;overflow-y:auto;cursor:text}
#editor-textarea:focus{outline:none}
#editor-textarea .ProseMirror{outline:none;white-space:pre-wrap;word-wrap:break-word;min-height:100%}
#editor-textarea .ProseMirror:focus{outline:none}
#editor-textarea[placeholder]:empty::before{content:attr(placeholder);color:var(--muted);font-style:italic;pointer-events:none}
#back-btn{display:inline-flex}

/* ═══════════════════════ Prose / Markdown ═══════════════════════ */
b,strong{font-weight:600}
em,i{font-style:italic}
del,s{opacity:var(--opacity-muted)}
code{font-family:var(--font-mono);background:var(--surface);padding:1px 5px;border-radius:var(--radius)}
a{color:var(--accent);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
a:hover{text-decoration-color:var(--fg)}
.wiki-link{text-decoration:none;border-bottom:1px dashed var(--muted);cursor:pointer;transition:border-color .15s}
.wiki-link:hover{border-bottom-color:var(--fg)}
.tag{color:var(--accent);cursor:pointer;transition:opacity .15s}
.tag:hover{opacity:var(--opacity-muted)}

/* ═══════════════════════ Block Elements ═══════════════════════ */
h1{font-size:1.6em;font-weight:600;margin:1.4em 0 .35em}
h2{font-size:1.25em;font-weight:600;margin:1.2em 0 .3em}
h3{font-size:1.1em;font-weight:600;margin:1em 0 .25em}
h4{font-size:1em;font-weight:600;margin:.9em 0 .2em}
h5{font-size:1em;font-weight:600;margin:.8em 0 .2em}
h6{font-size:1em;font-weight:600;font-style:italic;margin:.7em 0 .15em}
p{margin:0 0 .4em}

blockquote{margin:.5em 0;padding:8px 12px 8px 14px;border-left:3px solid color-mix(in srgb,var(--accent) 80%,var(--black));border-radius:0 var(--radius) var(--radius) 0;background:color-mix(in srgb,var(--accent) 4%,transparent)}
blockquote p{margin:0}

ul,ol{padding-left:1.4em;margin-bottom:.6em}
li{margin-bottom:.2em}
li[data-type="taskItem"]{list-style:none;margin-left:-1.4em;display:flex;align-items:flex-start;gap:6px}
li[data-type="taskItem"] input[type=checkbox]{accent-color:var(--accent);width:1em;height:1em;margin-top:.3em;flex-shrink:0}
li[data-checked=true]>div>p{opacity:var(--opacity-muted)}

li[data-item-type="task"]{list-style:none;position:relative;padding-left:1.6em}
li[data-item-type="task"]::before{content:"";position:absolute;left:.15em;top:.35em;width:1em;height:1em;border:1.5px solid var(--muted);border-radius:3px;cursor:pointer;transition:background .15s,border-color .15s}
li[data-item-type="task"][data-checked="true"]::before{background:var(--accent);border-color:var(--accent)}
li[data-item-type="task"][data-checked="true"]::after{content:"";position:absolute;left:.45em;top:.45em;width:.35em;height:.6em;border-right:1.5px solid var(--white);border-bottom:1.5px solid var(--white);transform:rotate(45deg)}
li[data-item-type="task"][data-checked="true"]>*{opacity:var(--opacity-muted)}

pre{margin:.6em 0;padding:12px 14px;background:var(--surface);border-radius:var(--radius);border:none;overflow-x:auto;font-family:var(--font-mono);position:relative}
pre code{background:none;padding:0;font-size:inherit}
pre .hljs{background:transparent!important}

hr{border:none;border-top:1px solid var(--border);margin:.8em 0}

table{border-collapse:collapse;width:100%;font-size:.92em;margin:.6em 0;border-radius:var(--radius);border:0}
th,td{padding:8px 12px;text-align:left;border-bottom:1px solid var(--border)}
th{font-weight:600}
tr:last-child td{border-bottom:none}

img,video,audio{max-width:100%;height:auto}

.callout{border-left:4px solid var(--accent);border-radius:var(--radius);background:var(--surface);padding:12px 16px;margin:.6em 0}
.callout-title{font-weight:600;margin-bottom:4px}
[class*=callout-]{--callout-color:var(--accent);border-color:var(--callout-color);background:color-mix(in srgb,var(--callout-color) 6%,var(--surface))}
.callout-note{--callout-color:#448aff}
.callout-warning{--callout-color:#ff9100}
.callout-danger{--callout-color:#ff5252}
.callout-info{--callout-color:#00b0ff}
.callout-tip{--callout-color:#00bfa5}

/* ═══════════════════════ Mermaid & Code ═══════════════════════ */
.mermaid{text-align:center;overflow-x:auto;padding:16px 0;margin:.6em 0;cursor:default}
.mermaid svg{max-width:100%;height:auto}
pre code.language-mermaid{opacity:.6;font-size:.85em}

/* ═══════════════════════ Layout ═══════════════════════ */
#layout{display:grid;grid-template-columns:140px var(--sidebar-w,280px) 1fr;grid-template-rows:1fr;height:100vh;height:100dvh}

/* ═══════════════════════ Left Strip ═══════════════════════ */
#left-strip{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:1rem;overflow:visible;grid-row:1;grid-column:1;background:var(--surface-offset)}
#left-strip button{width:100%;height:32px;justify-content:flex-start;gap:6px;padding:0 8px;background:none;border-color:transparent}
#left-strip .strip-tab{position:relative}
#left-strip button:hover{background:var(--surface-hover)}
#strip-profile:hover{background:var(--surface-hover)}
#left-strip .strip-tab.active{background:var(--surface)}
#left-strip .strip-spacer{flex:1;min-height:0}
#left-strip .strip-label{display:inline;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

#strip-profile{display:flex;align-items:center;width:100%;height:32px;border-radius:var(--radius);justify-content:flex-start;gap:6px;padding:0 8px;flex-shrink:0;cursor:pointer;margin-bottom:6px;transition:transform var(--transition-fast)}
#strip-profile .strip-label{display:inline}
#strip-profile:hover{transform:scale(1.02)}
.strip-avatar,.avatar-circle{border-radius:50%;color:var(--white);display:flex;align-items:center;justify-content:center;font-weight:600;flex-shrink:0;overflow:hidden}
.strip-avatar{width:26px;height:26px;background:var(--accent);border:none;background-size:cover;background-position:center}
.avatar-circle{width:72px;height:72px;background-color:var(--accent);cursor:pointer;transition:transform .15s}
.avatar-circle:hover{transform:scale(1.05)}

/* ═══════════════════════ View Switching ═══════════════════════ */
.view-page{display:none;grid-row:1;grid-column:2/-1;overflow:hidden;position:relative;z-index:1;background:var(--bg)}
#layout.view-notes :is(#sidebar,#editor){display:grid}
#layout.view-notes :is(#chat-list-panel,#editor-chat,.view-page){display:none!important}
#layout.view-chat #chat-list-panel{display:grid;grid-column:2}
#layout.view-chat #editor-chat{display:flex;grid-column:3/-1}
#layout.view-chat :is(#sidebar,#editor,.view-page){display:none!important}
#layout.view-library :is(#sidebar,#editor,#chat-list-panel,#editor-chat){display:none!important}
#layout.view-library #view-library{display:flex!important;flex-direction:column}
.view-page-header{display:flex;align-items:center;justify-content:space-between;padding:12px 24px;flex-shrink:0}
.view-page-header h2{font-size:var(--fs-2xl);margin:0}
.view-page-body{flex:1;overflow-y:auto;padding:24px;max-width:680px}

/* ═══════════════════════ Scroll Buttons ═══════════════════════ */
.scroll-btn{width:32px;height:32px;border-radius:50%;background:var(--surface);border:1px solid var(--border);color:var(--muted);display:none;transition:opacity .2s,transform .25s cubic-bezier(.16,1,.3,1),background .2s;z-index:var(--z-sticky);animation:fadeInUp .3s cubic-bezier(.16,1,.3,1)}
.scroll-btn.visible{display:flex}
.scroll-btn svg{width:14px;height:14px}
#sidebar-scroll-top{position:absolute;bottom:8px;left:50%;transform:translateX(-50%)}
#sidebar-scroll-top:hover{transform:translateX(-50%) translateY(-2px)}

/* ═══════════════════════ Sidebar / Chat List ═══════════════════════ */
#sidebar,#chat-list-panel{display:grid;grid-template-rows:auto 1fr;height:100%;min-height:0;overflow:hidden;padding:12px;position:relative;grid-row:1;grid-column:2}
:is(#sidebar,#chat-list-panel)>header{display:flex;align-items:center;gap:6px;padding:8px 12px;position:relative}
:is(#sidebar,#chat-list-panel)>header::before{content:"";position:absolute;left:calc(12px + 10px);top:50%;transform:translateY(-50%);width:14px;height:14px;background:var(--muted);mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");mask-size:contain;-webkit-mask-size:contain;mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;pointer-events:none;z-index:var(--z-base)}
#search-input,#chat-search-input{flex:1;min-width:0;height:32px;padding:0 12px 0 34px;border-radius:9999px;background:var(--surface);border:none;outline:none}
#search-input::placeholder,#chat-search-input::placeholder{color:var(--muted);opacity:var(--opacity-muted)}
#sidebar-scroll-area{min-height:0;overflow:hidden;position:relative;display:flex;flex-direction:column}
#sidebar-scroll-area #note-list{flex:1;min-height:0}
#note-list,#chat-list{min-height:0;overflow-y:auto;overflow-x:hidden;padding:12px 0}

/* Categories */
.category-section{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:500;color:var(--muted);letter-spacing:.3px;cursor:pointer;user-select:none}
.category-section{margin-top:8px;padding:12px 24px 4px}
.category-section::before{content:"";display:inline-block;width:12px;height:12px;background:var(--muted);mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");mask-size:contain;-webkit-mask-size:contain;mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;transition:transform .15s ease;flex-shrink:0}
.category-section.collapsed::before{transform:rotate(-90deg)}
.category-count{font-weight:400;opacity:var(--opacity-muted)}
.cat-note{padding-left:calc(24px + 24px)}
#library-grid .cat-note{padding-left:0}


/* ── Sort Picker (sidebar & chat headers) ── */
.sort-picker{position:relative;flex-shrink:0}
.sort-btn{width:28px;height:28px;border-radius:var(--radius);border:none;background:transparent;color:var(--muted);padding:0;transition:background var(--transition-fast),color var(--transition-fast);display:flex;align-items:center;justify-content:center}
.sort-btn:hover{background:var(--surface-hover);color:var(--fg)}
.sort-dropdown{position:absolute;top:100%;right:0;margin-top:4px;min-width:140px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 8px 24px rgba(0,0,0,.15);z-index:var(--z-dropdown);overflow:hidden;animation:fadeInUp .15s ease;white-space:nowrap}
.sort-option{display:block;width:100%;padding:8px 14px;text-align:left;font-family:inherit;font-size:var(--fs-sm);background:transparent;border:none;color:var(--fg);cursor:pointer;transition:background .15s}
.sort-option:hover{background:var(--surface-hover)}
.sort-option.selected{color:var(--accent);font-weight:500}

/* ═══════════════════════ List Items ═══════════════════════ */
#note-list>[data-id],#chat-list>[data-chat-id]{display:flex;align-items:center;gap:6px;padding:4px 12px;margin-left:calc(32px - 12px);margin-bottom:2px;overflow:hidden;border-radius:var(--radius);position:relative;cursor:pointer;touch-action:manipulation;transition:background var(--transition-fast),color var(--transition-fast);will-change:transform}
:is(#note-list>[data-id],#chat-list>[data-chat-id]).active{background:var(--surface)}
/* #note-list>[data-id].active:hover,#chat-list>[data-chat-id].active:hover{transform:none} */
:is(#note-list>[data-id],#chat-list>[data-chat-id]):is(.selected,.nav-focus){background:var(--surface-hover)}
:is(#note-list>[data-id],#chat-list>[data-chat-id]).selected.active{background:var(--surface)}
.note-category{font-size:.72em;font-weight:500;padding:1px 6px;border-radius:var(--radius);background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent);flex-shrink:0;max-width:72px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.panel-title{flex:1;font-weight:600}
#chat-list>[data-chat-id] .chat-unread-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);flex-shrink:0}
#chat-list>[data-chat-id] .chat-body{flex:1;min-width:0;overflow:hidden}
#chat-list>[data-chat-id] :is(.chat-preview,.chat-time){display:none}
#chat-list>[data-chat-id] .chat-spinner{display:none;gap:6px;align-items:center;flex-shrink:0}
#chat-list>[data-chat-id].streaming .chat-spinner{display:flex !important}
#chat-list>[data-chat-id] .chat-spinner>span,.dots>span{animation:dotBounce 1.4s infinite ease-in-out both}
:is(#chat-list>[data-chat-id] .chat-spinner>span,.dots>span):nth-child(2){animation-delay:.16s}
:is(#chat-list>[data-chat-id] .chat-spinner>span,.dots>span):nth-child(3){animation-delay:.32s}
#chat-list>[data-chat-id] .chat-spinner>span{width:4px;height:4px;border-radius:50%;background:var(--accent)}
.dots>span{width:6px;height:6px;border-radius:50%;background:var(--muted)}
.item-spacer{flex:1}
.item-action,.lib-action-btn{width:22px;height:22px;background:none;border-color:transparent;color:var(--muted);padding:0;opacity:0;pointer-events:none;transition:opacity var(--transition-fast)}
.item-pin[data-pinned="true"]{opacity:1;pointer-events:auto;color:var(--accent)}
#note-list>[data-id]:hover :is(.item-action,.lib-action-btn),#chat-list>[data-chat-id]:hover :is(.item-action,.lib-action-btn){opacity:1;pointer-events:auto}
.lib-action-btn{width:28px;height:28px;opacity:1;pointer-events:auto;text-decoration:none}
.lib-action-delete:hover{color:var(--danger);background:color-mix(in srgb,var(--danger) 10%,transparent)}
.note-list-empty{padding:16px;text-align:center}

/* ═══════════════════════ Misc UI ═══════════════════════ */
.skeleton,.skeleton-row{border-radius:var(--radius)}
.skeleton{background:linear-gradient(90deg,var(--surface) 25%,var(--surface-hover) 37%,var(--surface) 63%);background-size:400% 100%;animation:skeletonShimmer 1.4s ease infinite}
.skeleton-row{height:32px;margin:4px 8px}
#btn-sync{position:relative}
#btn-sync.spinning svg{animation:spin .8s linear infinite}

/* ═══════════════════════ Prose / Markdown ═══════════════════════ */
b,strong{font-weight:600}
em,i{font-style:italic}
del,s{opacity:var(--opacity-muted)}
:is(#editor-textarea,.msg-content) .cm-inline-code{font-family:var(--font-mono);background:var(--surface);padding:1px 5px;border-radius:var(--radius)}
:is(#editor-textarea,.msg-content) .cm-link{color:var(--accent);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
:is(#editor-textarea,.msg-content) .cm-link:hover{text-decoration-color:var(--fg)}
:is(#editor-textarea,.msg-content) .wiki-link{text-decoration:none;border-bottom:1px dashed var(--muted);cursor:pointer;transition:border-color .15s}
:is(#editor-textarea,.msg-content) .wiki-link:hover{border-bottom-color:var(--fg)}
:is(#editor-textarea,.msg-content) .tag{color:var(--accent);cursor:pointer;transition:opacity .15s}
:is(#editor-textarea,.msg-content) .tag:hover{opacity:var(--opacity-muted)}

/* ═══════════════════════ WYSIWYG ═══════════════════════ */
.wysiwyg-block{min-height:1.7em}
.wysiwyg-paragraph{margin:0 0 .4em}
.wysiwyg-heading{margin:1.4em 0 .35em}
.wysiwyg-heading .cm-heading-text{font-weight:600}
.wysiwyg-heading .cm-heading-text.h1{font-size:1.6em}
.wysiwyg-heading .cm-heading-text.h2{font-size:1.25em}
.wysiwyg-heading .cm-heading-text.h3{font-size:1.1em}
.wysiwyg-heading .cm-heading-text:is(.h4,.h5,.h6){font-size:1em}
.wysiwyg-heading .cm-heading-text.h6{font-style:italic}
.wysiwyg-blockquote{margin:.5em 0;padding:8px 12px 8px 14px;border-left:3px solid color-mix(in srgb,var(--accent) 80%,var(--black));border-radius:0 var(--radius) var(--radius) 0;background:color-mix(in srgb,var(--accent) 4%,transparent)}
.wysiwyg-list-item{padding-left:1.4em;margin-bottom:.2em;position:relative}
.wysiwyg-list-item[data-type="ul"]::before{content:"•";position:absolute;left:.2em;color:var(--muted)}
.wysiwyg-list-item[data-type="ol"]{counter-increment:ol-counter}
.wysiwyg-list-item[data-type="ol"]::before{content:counter(ol-counter) ".";position:absolute;left:0;color:var(--muted);font-variant-numeric:tabular-nums}
/* Reset ordered list counter at the start of each contiguous OL group */
.wysiwyg-list-item[data-type="ol"]:first-child,
:not(.wysiwyg-list-item)+.wysiwyg-list-item[data-type="ol"],
.wysiwyg-list-item[data-type="ul"]+.wysiwyg-list-item[data-type="ol"],
.wysiwyg-list-item[data-type="task"]+.wysiwyg-list-item[data-type="ol"]{counter-reset:ol-counter}
/* List indentation via data-indent */
.wysiwyg-list-item[data-indent="1"]{padding-left:2.8em}
.wysiwyg-list-item[data-indent="2"]{padding-left:4.2em}
.wysiwyg-list-item[data-indent="3"]{padding-left:5.6em}
.wysiwyg-list-item[data-indent="4"]{padding-left:7.0em}
.wysiwyg-list-item[data-indent="5"]{padding-left:8.4em}
.wysiwyg-list-item[data-indent="6"]{padding-left:9.8em}
.wysiwyg-list-item[data-indent]:not([data-indent="0"])::after{content:"";position:absolute;left:.7em;top:.2em;bottom:.2em;width:1px;background:var(--border);opacity:.5;pointer-events:none}
:not(.wysiwyg-list-item)+.wysiwyg-list-item{margin-top:.6em}
.wysiwyg-list-item:is(:has(+:not(.wysiwyg-list-item)),:last-child){margin-bottom:.6em}
.wysiwyg-code-block{margin:.6em 0;background:var(--surface);border-radius:var(--radius);position:relative;overflow:hidden}
:is(.wysiwyg-code-block>.cm-code-lang,.msg-content .cm-code-lang){display:block;padding:3px 14px;font-size:.72em;font-weight:600;color:var(--muted);background:color-mix(in srgb,var(--fg) 4%,transparent);text-transform:uppercase;letter-spacing:.5px;pointer-events:none}
:is(.wysiwyg-code-block>.cm-code-lang+pre,.msg-content .cm-code-lang+pre,.wysiwyg-code-block .cm-code-lang+pre){padding-top:0;border-radius:0 0 var(--radius) var(--radius);margin-top:0}
.msg-content .cm-code-lang{border-radius:var(--radius) var(--radius) 0 0}
:is(.wysiwyg-code-block>pre,.msg-content pre){margin:.5em 0;padding:12px 14px;background:var(--surface);border:none;border-radius:0;overflow-x:auto;font-family:var(--font-mono);position:relative}
.wysiwyg-code-block>pre{margin:0;background:none}

/* ── Code copy button ── */
.code-copy-btn{position:absolute;top:6px;right:6px;width:28px;height:28px;border-radius:var(--radius);background:var(--surface);color:var(--muted);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .15s,background .15s,color .15s;cursor:pointer;z-index:var(--z-base);padding:0}
pre:hover .code-copy-btn,
.code-copy-btn:focus-visible{opacity:1}
.code-copy-btn:hover{background:var(--surface-hover);color:var(--fg)}
.code-copy-btn.copied{background:var(--success);color:var(--white);border-color:var(--success)}
:is(.wysiwyg-code-block>pre code,.msg-content pre code){background:none;padding:0;font-size:inherit}
.wysiwyg-table{margin:.6em 0;overflow-x:auto;border-radius:var(--radius);border:1px solid var(--border)}
.wysiwyg-table table{border-collapse:collapse;width:100%;font-size:.92em}
.wysiwyg-table :is(th,td){padding:8px 12px;text-align:left;border-bottom:1px solid var(--border)}
.wysiwyg-table th{font-weight:600}
.wysiwyg-table tr:last-child td{border-bottom:none}
.wysiwyg-table :is(.al-center,.al-right){text-align:center}
.wysiwyg-table .al-right{text-align:right}
.wysiwyg-hr hr{border:none;border-top:1px solid var(--border);margin:.8em 0}
.wysiwyg-media{margin:.6em 0;min-height:auto}
.wysiwyg-html{margin:.6em 0;min-height:200px;border-radius:var(--radius);overflow:hidden;border:1px solid var(--border)}
.wysiwyg-html .embedded-iframe{width:100%;min-height:400px;display:block;border:none}
.callout{border-left:4px solid var(--accent);border-radius:var(--radius);background:var(--surface);padding:12px 16px;margin:.6em 0}
.callout-title{font-weight:600;margin-bottom:4px}
[class*="callout-"]{--callout-color:var(--accent);border-color:var(--callout-color);background:color-mix(in srgb,var(--callout-color) 6%,var(--surface))}
.callout-note{--callout-color:#448aff}
.callout-warning{--callout-color:#ff9100}
.callout-danger{--callout-color:#ff5252}
.callout-info{--callout-color:#00b0ff}
.callout-tip{--callout-color:#00bfa5}
.cm-task-checkbox{position:absolute;left:.2em;top:50%;transform:translateY(-50%);display:flex;align-items:center;cursor:pointer}
.cm-task-checkbox input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.cm-task-checkbox .checkbox-round{display:inline-block;width:1.2em;height:1.2em;border:none;background:var(--surface);border-radius:50%;flex-shrink:0;position:relative;transition:background .15s}
.cm-task-checkbox input:checked+.checkbox-round{background:var(--accent)}
.cm-task-checkbox input:checked+.checkbox-round::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(45deg);width:.3em;height:.5em;border-right:1.5px solid var(--white);border-bottom:1.5px solid var(--white)}
.wysiwyg-list-item[data-type="task"]{padding-left:1.75em}

:is(.wysiwyg-code-block .hljs,.msg-content .hljs){background:transparent!important;color:inherit}

/* ═══════════════════════ Chat ═══════════════════════ */
#editor-chat{display:flex;flex-direction:column;height:100%;min-width:0;overflow:hidden;position:relative;grid-row:1}
#editor-chat #chat-messages{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:6px;position:relative;max-width:80ch;width:100%;margin:0 auto}
#editor-chat .chat-loading{margin:8px 0}
#chat-scroll-bottom{position:sticky;bottom:12px;align-self:center;margin-top:-44px}
.msg{max-width:100%;width:100%;word-wrap:break-word;padding:8px 1rem;position:relative}
.msg .msg-time{display:none}
.msg .msg-actions{position:absolute;top:4px;right:8px;display:flex;gap:6px;opacity:0;transition:opacity .15s}
.msg:hover .msg-actions{opacity:1}
.msg[data-role="assistant"] .msg-actions{right:auto;left:100%;margin-left:4px}
#chat-messages .msg[data-role="assistant"]{overflow-wrap:break-word}
.msg-action-btn{width:22px;height:22px;padding:0;background:var(--surface);color:var(--muted);font-size:var(--fs-xs);transition:background .15s,color .15s}
.msg-action-btn.copied{background:var(--success);color:var(--white);border-color:var(--success)}
.note-link{color:var(--accent);text-decoration:underline;text-underline-offset:2px;cursor:pointer;font-weight:500}
.note-link:hover{filter:brightness(1.15)}
.note-link::after{content:"↗";font-size:var(--fs-xs);margin-left:2px;opacity:var(--opacity-muted)}

/* Tool Rows */
.tool-section{align-self:flex-start;width:100%;font-size:var(--fs-xs);margin:4px 0}
.tool-row{border-radius:var(--radius);background:var(--surface-offset);margin-bottom:3px;overflow:hidden;transition:background .2s}
.tool-row-bar{display:flex;align-items:center;gap:6px;padding:8px 10px;cursor:pointer;user-select:none;min-height:32px}
.tool-row-icon{flex-shrink:0;width:16px;height:16px;display:flex;align-items:center;justify-content:center;font-size:var(--fs-sm)}
.tool-row[data-status="pending"] .tool-row-icon::after{content:"";display:block;width:12px;height:12px;border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:toolSpin .7s linear infinite}
:is(.tool-row[data-status="success"] .tool-row-icon,.tool-row[data-status="error"] .tool-row-icon){color:var(--success)}
.tool-row[data-status="error"] .tool-row-icon{color:var(--danger)}
.tool-row[data-status="success"] .tool-row-icon::after{content:"\2713";font-weight:700}
.tool-row[data-status="error"] .tool-row-icon::after{content:"\2717";font-weight:700}
.tool-row-name{flex:1;font-weight:500;font-size:var(--fs-xs)}
.tool-row-name .tool-arg-preview{font-weight:400;color:var(--muted);margin-left:6px;font-size:var(--fs-sm);overflow:hidden;text-overflow:ellipsis}
.tool-row-status{font-size:var(--fs-xs);color:var(--muted);opacity:var(--opacity-muted);transition:opacity .2s}
:is(.tool-row[data-status="success"] .tool-row-status,.tool-row[data-status="error"] .tool-row-status){opacity:.8}
.tool-row[data-status="success"] .tool-row-status{color:var(--success)}
.tool-row[data-status="error"] .tool-row-status{color:var(--danger)}
.tool-row-detail{max-height:0;opacity:0;overflow:hidden;transition:max-height .3s,opacity .2s;border-top:1px solid transparent}
.tool-row.expanded .tool-row-detail{max-height:600px;opacity:1;border-top-color:var(--border)}
.tool-row-section{padding:8px 10px 4px}
.tool-row-label{font-size:var(--fs-xs);font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);opacity:var(--opacity-muted);margin-bottom:2px}
.tool-row-detail pre{font-family:var(--font-mono);font-size:var(--fs-sm);color:var(--muted);white-space:pre-wrap;word-break:break-word;max-height:300px;overflow-y:auto;margin:0 0 4px}
.thinking-block{width:100%;padding:8px 1rem}
.msg[data-role="thinking"] .msg-content{color:var(--muted);white-space:pre-wrap;word-break:break-word;font-size:.92em;opacity:.85}
.msg[data-role="thinking"]:hover .msg-actions{opacity:1}
.thinking-content{white-space:pre-wrap;word-break:break-word}
.chat-loading{align-self:flex-start;padding:12px 16px;background:var(--surface);font-size:var(--fs-sm);display:flex;align-items:center;gap:6px;flex-wrap:wrap;border-radius:var(--radius);animation:fadeInUp .3s cubic-bezier(.16,1,.3,1)}
.think-label{font-size:var(--fs-xs);font-weight:500;color:var(--muted);opacity:.85;max-width:180px;animation:thinkPulse 2s ease-in-out infinite}
.dots{display:flex;gap:6px;align-items:center}

/* ═══════════════════════ Chat Input ═══════════════════════ */
.chat-view-input{max-width:80ch;width:100%;margin:0 auto;padding:8px 12px 16px;padding-bottom:calc(16px + env(safe-area-inset-bottom, 0px))}
.chat-view-input #chat-form{display:flex;flex-direction:column;background:var(--bg);border-radius:calc(var(--radius) * 2.5);border:1px solid var(--border);position:relative}
#chat-input{flex:1;min-height:80px;max-height:40vh;padding:16px 100px 16px 16px;border-radius:var(--radius);background:transparent;border:none;outline:none;resize:none;overflow-y:auto;font-family:inherit;field-sizing:content}
#chat-input:focus{outline:none;background:transparent}
#chat-input::placeholder{color:var(--muted);opacity:var(--opacity-muted)}
.chat-input-hint{position:absolute;bottom:2px;right:14px;font-size:var(--fs-xs);color:var(--muted);opacity:var(--opacity-disabled);pointer-events:none;z-index:var(--z-base)}
.chat-input-actions{display:flex;align-items:center;gap:6px;z-index:var(--z-base);padding:.75rem;justify-content:flex-end}
#chat-attachments{display:flex;flex-wrap:nowrap;gap:4px;padding:10px 12px 0;overflow-x:auto;scrollbar-width:none}
#chat-attachments::-webkit-scrollbar{display:none}
#chat-attachments:empty{display:none}
#chat-attachments .file-attachment{flex-shrink:0;margin-top:0;padding:2px 8px 2px 6px;border-radius:20px;font-size:11px;background:var(--surface-hover);color:var(--muted);border:1px solid var(--border);animation:fadeInUp .2s ease;display:flex;align-items:center;gap:4px}
#chat-attachments .file-attachment :is(.file-icon,.file-size){display:none}
#chat-attachments .file-attachment .file-name{max-width:120px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#chat-attachments .file-attachment .file-remove{width:14px;height:14px;background:transparent;color:var(--muted);padding:0;border-radius:50%;border:none;opacity:.5;font-size:10px;line-height:14px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
#chat-attachments .file-attachment .file-remove:hover{background:var(--surface);color:var(--danger);opacity:1}
#file-btn{position:relative;border-radius:var(--radius);background:transparent;border:none;transition:background .2s}
#file-btn:hover{background:var(--surface-hover)}
#file-btn:hover::after{opacity:1}
#file-btn::after{content:attr(title);position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);padding:3px 8px;background:var(--tooltip-bg,var(--surface));color:var(--fg);border-radius:var(--radius);font-size:11px;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .15s;box-shadow:0 2px 8px rgba(0,0,0,.12)}

/* ═══════════════════════ Custom Model Picker ═══════════════════════ */
.chat-model-picker{position:relative;flex-shrink:0}
.chat-reasoning-picker{position:relative;flex-shrink:0}
.chat-model-btn{position:relative;display:flex;align-items:center;gap:4px;padding:3px 8px;width:max-content;border-radius:var(--radius);border:none;background:transparent;color:var(--fg);cursor:pointer;font-family:inherit;font-size:12px;outline:none;opacity:.85;transition:opacity .2s;white-space:nowrap}
.chat-model-btn::after{content:attr(title);position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);padding:3px 8px;background:var(--tooltip-bg,var(--surface));color:var(--fg);border-radius:var(--radius);font-size:11px;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .15s;box-shadow:0 2px 8px rgba(0,0,0,.12)}
.chat-model-btn:hover,.chat-model-btn:focus{opacity:1;background:var(--surface-hover)}
.chat-model-btn:hover::after,.chat-model-btn:focus::after{opacity:1}
.chat-model-btn .chat-model-label{overflow:hidden;text-overflow:ellipsis}
.chat-model-btn .chat-model-arrow{flex-shrink:0;color:var(--muted);transition:transform .2s}
.chat-model-btn.open .chat-model-arrow{transform:rotate(180deg)}
.chat-model-ring{display:none;width:14px;height:14px;flex-shrink:0;margin-left:2px}
.chat-model-ring.visible{display:block}
.chat-model-ring.indeterminate svg{animation:toolSpin .7s linear infinite}

.chat-model-dropdown{position:absolute;top:100%;left:0;margin-top:4px;min-width:100%;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 8px 24px rgba(0,0,0,.15);z-index:var(--z-popup);overflow:hidden;animation:fadeInUp .15s ease;white-space:nowrap}
.chat-model-option{display:block;width:100%;padding:8px 14px;text-align:left;font-family:inherit;font-size:12px;background:transparent;border:none;color:var(--fg);cursor:pointer;transition:background .15s}
.chat-model-option:hover{background:var(--surface-hover)}
.chat-model-option.selected{color:var(--accent);font-weight:500}
#file-btn.converting{animation:convert-pulse 1s ease-in-out infinite;pointer-events:none}
.file-attachment{padding:8px 10px;margin-top:6px;background:var(--surface-hover);border:1px solid var(--border);border-radius:var(--radius);font-size:var(--fs-sm);animation:fadeInUp .25s ease}
.file-attachment .file-icon{flex-shrink:0;width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:var(--surface);border-radius:var(--radius);color:var(--accent)}
.file-attachment .file-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.file-attachment .file-size{font-size:var(--fs-xs);color:var(--muted)}
.file-attachment .file-remove{width:20px;height:20px;padding:0;border-radius:50%;border:none;background:var(--surface);color:var(--muted);font-size:var(--fs-sm);transition:background .15s,color .15s}
.file-attachment .file-remove:hover{background:var(--danger);color:var(--white)}
#send-btn{position:relative;background:transparent;border:none;border-radius:var(--radius);transition:background .2s,transform .15s}
#send-btn:hover:not(:disabled){background:var(--surface-hover)}
#send-btn:hover::after{opacity:1}
#send-btn::after{content:attr(title);position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);padding:3px 8px;background:var(--tooltip-bg,var(--surface));color:var(--fg);border-radius:var(--radius);font-size:11px;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .15s;box-shadow:0 2px 8px rgba(0,0,0,.12)}
#send-btn:not(:disabled):active{transform:scale(.95)}
#send-btn .icon-stop{display:none}
#send-btn .icon-send{display:block}
#send-btn:disabled{opacity:.3;cursor:default;filter:none;background:transparent!important;color:var(--muted)!important;animation:none!important}
#send-btn:not(:disabled){background:transparent;color:var(--fg)}
#send-btn.stop .icon-send{display:none}
#send-btn.stop .icon-stop{display:block}
#send-btn.stop:not(:disabled){background:transparent;color:var(--danger)}
.voice-btn{position:relative;background:transparent;border:none;border-radius:var(--radius)}
.voice-btn:hover{background:var(--surface-hover)}
.voice-btn:hover::after{opacity:1}
.voice-btn::after{content:attr(title);position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);padding:3px 8px;background:var(--tooltip-bg,var(--surface));color:var(--fg);border-radius:var(--radius);font-size:11px;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .15s;box-shadow:0 2px 8px rgba(0,0,0,.12)}
.voice-btn.active{background:transparent;color:var(--danger)}
.key-prompt{padding:16px;text-align:center;font-size:var(--fs-sm)}
.key-prompt input{margin:8px 0;border-radius:var(--radius);font-size:var(--fs-sm)}
.key-prompt button{width:100%}

/* ═══════════════════════ Empty / Toasts / Dialogs ═══════════════════════ */
.empty-state,.library-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:48px 24px;gap:6px;color:var(--muted);animation:fadeInUp var(--transition-slow)}
.empty-state .empty-icon{width:48px;height:48px;border-radius:var(--radius);background:var(--surface);display:flex;align-items:center;justify-content:center;margin-bottom:8px;color:var(--muted);animation:emptyFloat 3s ease-in-out infinite}
.empty-state .empty-icon svg{width:24px;height:24px}
:is(.empty-state strong,.library-empty p){font-weight:600;color:var(--fg);margin:0}
:is(.empty-state small,.library-empty small){font-size:var(--fs-sm);max-width:260px}
#view-library .library-empty p{font-size:var(--fs-lg)}
#toast-container{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:calc(var(--z-toast) + 1);display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none;padding-bottom:env(safe-area-inset-bottom)}
.toast{display:flex;align-items:center;gap:6px;pointer-events:auto;padding:12px 24px;border-radius:var(--radius);font-weight:500;color:var(--bg);background:var(--fg);animation:toastIn var(--transition-slow),toastOut var(--transition) 2.6s forwards;max-width:380px;text-align:left}
.toast .toast-icon{width:20px;height:20px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.toast.success{background:var(--success)}
.toast.error{background:var(--danger)}
.toast.warning{background:#f90;color:var(--black)}

/* Confirm Dialogs */
:is(#confirm-dialog,#library-confirm-dialog){border:none;border-radius:var(--radius);padding:24px;margin:auto;background:var(--bg);color:var(--fg);width:340px;max-width:90vw;text-align:center}
:is(#confirm-dialog,#library-confirm-dialog)::backdrop{background:rgba(0,0,0,.4)}
:is(#confirm-dialog,#library-confirm-dialog) p{margin:0 0 20px}
.confirm-actions{display:flex;gap:6px;justify-content:center}
.confirm-actions button{padding:8px 20px;width:auto;height:auto;font-weight:500}
.confirm-actions .btn-cancel{background:var(--surface)}
.confirm-actions .btn-danger{background:var(--danger);color:var(--white)}
.confirm-actions .btn-danger:hover{opacity:var(--opacity-hover)}

/* Modal Overlay */
.modal-overlay{position:fixed;inset:0;z-index:calc(var(--z-modal) + 1);background:rgba(0,0,0,.25);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:none;align-items:flex-start;justify-content:center;padding-top:14vh}
.modal-overlay.open{display:flex}
.modal-overlay .wrap{max-width:520px;width:90%;background:var(--bg);color:var(--fg);border-radius:var(--radius);overflow:hidden;animation:slideIn .25s cubic-bezier(.16,1,.3,1);box-shadow:0 8px 32px rgba(0,0,0,.18)}
.modal-overlay input{width:100%;padding:16px 20px;font-size:var(--fs-lg);border:none;background:transparent;outline:none;border-radius:0}
.modal-overlay input::placeholder{color:var(--muted)}
.modal-overlay .results{max-height:50vh;overflow-y:auto;border-top:1px solid var(--border)}
.modal-overlay .results>div{padding:12px 20px;cursor:pointer;display:flex;align-items:center;gap:6px}
.modal-overlay .results>div small{font-size:var(--fs-xs);color:var(--muted);margin-left:auto}
.modal-overlay .empty{padding:2rem;text-align:center;color:var(--muted)}
.modal-overlay .shortcut{font-size:var(--fs-xs);color:var(--muted);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1px 6px;margin-left:auto;font-family:monospace}

/* ── Search modal ── */
.modal-overlay#search-modal .wrap{background:var(--surface-offset);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:none;box-shadow:0 8px 32px rgba(0,0,0,.15)}
.modal-search-box{display:flex;align-items:center;gap:0;padding:8px 16px}
.modal-overlay#search-modal .wrap{border-radius:var(--radius);overflow:hidden}
.modal-search-icon{flex-shrink:0;color:var(--muted);opacity:.6}
.modal-search-box input{flex:1;padding:12px 8px;font-size:var(--fs-lg);border:none;background:transparent;outline:none;border-radius:0}

/* Section headers */
.search-section-header{padding:8px 20px 4px;font-size:var(--fs-xs);font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;cursor:default;user-select:none;border-bottom:none!important;background:transparent!important}
.search-section-header:first-child{padding-top:12px}

/* Result rows (under headers) */
.search-result{padding:8px 20px;cursor:pointer;display:flex;align-items:center;transition:background var(--transition-fast)}
.search-result:hover,.search-result.selected{background:var(--surface-hover)}
.search-result .result-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center}
.search-result .result-subtitle{flex-shrink:0;margin-left:auto;font-size:var(--fs-xs);color:var(--muted);padding-left:12px}
.search-result-command .result-title{color:var(--accent)}

/* ═══════════════════════ Settings ═══════════════════════ */
#settings-dialog{border:none;border-radius:var(--radius);padding:0;margin:auto;background:var(--bg);color:var(--fg);width:680px;max-width:90vw;height:560px;max-height:80vh;overflow:hidden}
#settings-dialog::backdrop{background:rgba(0,0,0,.4)}
.settings-layout{display:flex;height:100%}
.settings-sidebar{display:flex;flex-direction:column;width:180px;flex-shrink:0;background:var(--surface-offset);border-right:1px solid var(--border);padding:12px 8px;gap:6px}
.settings-cat{display:flex;align-items:center;gap:6px;width:100%;padding:8px 12px;border:none;border-radius:var(--radius);background:transparent;font-weight:500;text-align:left;transition:background var(--transition-fast),color var(--transition-fast)}
.settings-cat.active{background:var(--surface)}
.settings-cat .icon{flex-shrink:0}
.settings-content{flex:1;display:flex;flex-direction:column;overflow:hidden}
.settings-header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);flex-shrink:0}
.settings-header h2{font-size:var(--fs-xl);margin:0}
.settings-body{flex:1;overflow-y:auto;padding:24px}
.settings-category .section{margin-bottom:16px}
.settings-category .section-label{font-size:var(--fs-sm);font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px;display:block}
.settings-category :is(input,select,textarea){width:100%;padding:8px 10px;border-radius:var(--radius);background:var(--surface);border:1px solid var(--border);margin-bottom:4px}
.settings-category textarea{min-height:80px;resize:vertical;font-family:monospace;font-size:var(--fs-sm)}
.settings-category select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}
.settings-category .hint{font-size:var(--fs-xs);color:var(--muted);margin-top:2px}

/* ── Balance display ── */
.balance-display{display:flex;align-items:center;gap:8px;padding:8px 0;min-height:36px}
.balance-display .balance-amount{font-size:var(--fs-xl);font-weight:700;font-variant-numeric:tabular-nums}
.balance-display .balance-currency{font-size:var(--fs-sm);color:var(--muted)}
.balance-display .balance-status{font-size:var(--fs-xs);color:var(--muted);margin-left:auto;display:flex;align-items:center;gap:4px}
.balance-display .balance-status .dot{width:6px;height:6px;border-radius:50%;display:inline-block}
.balance-display .balance-status .dot.available{background:var(--success)}
.balance-display .balance-status .dot.empty{background:var(--danger)}
.balance-display .balance-status .dot.loading{background:var(--muted);animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.3}50%{opacity:1}}
#btn-refresh-balance{transition:transform var(--transition-fast)}
#btn-refresh-balance:hover{color:var(--fg)!important}
#btn-refresh-balance:active{transform:rotate(180deg)}

.modal-close{position:absolute;top:14px;right:14px;width:30px;height:30px;background:none;border-color:transparent;color:var(--muted);z-index:var(--z-base)}

/* ═══════════════════════ Context Menu ═══════════════════════ */
#context-menu{display:none;position:fixed;z-index:var(--z-modal);min-width:160px;background:var(--bg);color:var(--fg);border-radius:var(--radius);padding:4px;box-shadow:var(--shadow-menu)}
#context-menu .item{padding:8px 12px;white-space:nowrap}
#context-menu .item.danger{color:var(--danger)}
#context-menu .item.danger:hover{background:rgba(255,0,0,.08)}
#context-menu .item.has-sub{display:flex;align-items:center;position:relative}
#context-menu .item.has-sub::after{content:"▶";font-size:7px;margin-left:auto}
#context-menu .submenu{display:none;position:absolute;left:calc(100% + 4px);top:-4px;min-width:170px;max-width:240px;max-height:280px;overflow-y:auto;background:var(--bg);color:var(--fg);border-radius:var(--radius);padding:4px 0;box-shadow:var(--shadow-menu)}
#context-menu .submenu>div{padding:8px 16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#context-menu .submenu.flip{left:auto;right:calc(100% + 4px)}
#context-menu .has-sub:hover .submenu{display:block}
#context-menu hr{height:1px;background:var(--border);border:none;margin:4px 0}

/* ═══════════════════════ Onboarding ═══════════════════════ */
#onboarding-overlay{border:none;background:transparent;padding:0;color:var(--fg)}
#onboarding-overlay::backdrop{background:rgba(0,0,0,.4)}
#onboarding-overlay .card{width:380px;max-width:90vw;padding:2rem 1.75rem;display:flex;flex-direction:column;align-items:center;text-align:center;position:relative}
#onboarding-overlay h2{font-size:var(--fs-2xl);margin-bottom:16px}
#onboarding-overlay .field{width:100%;margin-bottom:12px;text-align:left}
#onboarding-overlay .field label{display:block;font-size:var(--fs-sm);font-weight:600;color:var(--muted);margin-bottom:5px;text-transform:uppercase;letter-spacing:.5px}
#onboarding-overlay .field input{width:100%;padding:8px 12px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);outline:none}
#onboarding-overlay .field input:focus{border-color:var(--accent)}
#onboarding-overlay .save{width:100%;margin-top:8px;padding:12px 0;font-weight:600;border:none;border-radius:var(--radius);background:var(--accent);color:var(--white)}
#onboarding-overlay .save:hover{opacity:var(--opacity-hover)}
.onboard-avatar{display:flex;flex-direction:column;align-items:center;gap:6px;margin-bottom:20px}

/* ═══════════════════════ Library ═══════════════════════ */
.library-view-btns{display:flex;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;flex-shrink:0;margin-left:auto}
.lib-view-btn{width:28px;height:28px;padding:0;display:flex;align-items:center;justify-content:center;border:none;border-radius:0;background:transparent;color:var(--muted)}
.lib-view-btn.active{background:var(--surface)}
.lib-view-btn:first-child{border-right:1px solid var(--border)}
#view-library .view-page-body{max-width:680px;width:100%;margin:0 auto;padding:16px 0}
#view-library .view-page-header{max-width:680px;width:100%;margin:0 auto;padding-left:0;padding-right:0;display:flex;align-items:center;justify-content:space-between;gap:6px;flex-wrap:wrap}
#view-library .view-page-header h2{margin-bottom:0}
#library-upload-btn{width:auto;height:32px;padding:0 12px;gap:6px;font-size:var(--fs-sm);font-weight:600;border-radius:20px;border:none;background:var(--accent);color:var(--white);display:inline-flex;align-items:center;justify-content:center}
#library-upload-btn:hover{opacity:var(--opacity-hover);background:var(--accent)}
#library-upload-btn:active{transform:scale(.97)}
.library-controls{display:flex;align-items:center;justify-content:space-between;gap:8px}
.library-controls{display:flex;gap:6px;align-items:center;flex-wrap:wrap;max-width:680px;width:100%;margin:0 auto;padding:0 0 12px}
#library-search{width:180px;flex-shrink:0;height:28px;font-size:var(--fs-sm);border-radius:9999px;padding:0 12px 0 30px;background:var(--surface);border:none;outline:none;transition:border-color var(--transition-fast);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:10px center}
#library-search::placeholder{color:var(--muted);font-size:var(--fs-sm)}
.lib-filter-picker{position:relative;flex-shrink:0}
.lib-filter-btn{display:flex;align-items:center;gap:4px;padding:3px 10px;height:28px;border-radius:var(--radius);border:1px solid var(--border);background:transparent;color:var(--fg);font-family:inherit;font-size:var(--fs-sm);cursor:pointer;white-space:nowrap;opacity:.85;transition:opacity .2s}
.lib-filter-btn:hover,.lib-filter-btn:focus{opacity:1;background:var(--surface-hover)}
.lib-filter-btn .lib-filter-label{overflow:hidden;text-overflow:ellipsis}
.lib-filter-btn .lib-filter-arrow{flex-shrink:0;color:var(--muted);transition:transform .2s}
.lib-filter-btn.open .lib-filter-arrow{transform:rotate(180deg)}
.lib-filter-dropdown{position:absolute;top:100%;left:0;margin-top:4px;min-width:100%;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 8px 24px rgba(0,0,0,.15);z-index:var(--z-popup);overflow:hidden;white-space:nowrap}
.lib-filter-option{display:block;width:100%;padding:8px 14px;text-align:left;font-family:inherit;font-size:var(--fs-sm);background:transparent;border:none;color:var(--fg);cursor:pointer;transition:background .15s}
.lib-filter-option:hover{background:var(--surface-hover)}
.lib-filter-option.selected{color:var(--accent);font-weight:500}
.library-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.library-section{margin-bottom:24px}
.library-item{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;transition:border-color var(--transition-fast);display:flex;flex-direction:column}
.library-item:hover{border-color:var(--accent)}
.library-thumb{width:100%;height:140px;object-fit:cover;display:block;background:var(--surface-offset)}
.library-audio{width:100%;height:40px;margin-top:8px}
.library-icon-placeholder{width:100%;height:100px;display:flex;align-items:center;justify-content:center;color:var(--muted);background:var(--surface-offset)}
.library-item-info{padding:10px 12px;display:flex;flex-direction:column;gap:6px;min-width:0}
.lib-sync-badge{font-size:8px;font-weight:600;color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent);padding:1px 5px;border-radius:3px;vertical-align:middle;text-transform:uppercase;letter-spacing:.3px}
.lib-sync-badge.synced{color:#22c55e;background:color-mix(in srgb,#22c55e 12%,transparent)}
.lib-sync-badge.chunked{color:#60a5fa;background:color-mix(in srgb,#60a5fa 12%,transparent)}
.library-item-meta{font-size:var(--fs-xs);color:var(--muted)}
.library-item-actions{display:flex;gap:6px;padding:8px 8px 8px;border-top:1px solid var(--border);margin-top:auto}
.library-table{width:100%;border-collapse:collapse;table-layout:fixed}
.library-table :is(th,td){padding:8px 12px;border-bottom:1px solid var(--border);white-space:nowrap}
.library-table th{font-weight:600;color:var(--muted);letter-spacing:.3px;text-align:left;cursor:pointer;user-select:none;-webkit-user-select:none}
.library-table th:hover{color:var(--fg)}
.library-table th.sorted{color:var(--accent)}
.library-table th.sorted::after{content:' ' attr(data-dir);font-size:11px}
.library-table th.col-name{width:auto}
.library-table th.col-date{width:140px}
.library-table th.col-sync{width:90px}
.library-table th.col-size{width:80px}
.library-table th.col-actions{width:40px}
.library-table td{overflow:hidden;text-overflow:ellipsis}
.library-table tbody tr{transition:background var(--transition-fast)}
.library-table-thumb,.library-table-icon{width:28px;height:28px;border-radius:4px;flex-shrink:0}
.lib-sync-cell{font-size:var(--fs-xs);font-weight:500;white-space:nowrap}
.lib-sync-cell .sync-dot{display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:5px;vertical-align:middle;flex-shrink:0}
.lib-sync-cell.sync-synced{color:var(--green,#2ea44f)} .lib-sync-cell.sync-synced .sync-dot{background:var(--green,#2ea44f)}
.lib-sync-cell.sync-pending{color:var(--orange,#d97706)} .lib-sync-cell.sync-pending .sync-dot{background:var(--orange,#d97706)}
.library-table-thumb{object-fit:cover;background:var(--surface-offset)}
.library-table-icon{display:flex;align-items:center;justify-content:center;background:var(--surface-offset);color:var(--muted)}
.lib-row-actions{position:relative}
.lib-row-menu-btn{width:28px;height:28px;border:none;background:transparent;color:var(--muted);display:flex;align-items:center;justify-content:center}
.lib-row-dropdown{display:none;position:absolute;right:0;top:100%;z-index:var(--z-dropdown);min-width:140px;background:var(--bg);color:var(--fg);border-radius:var(--radius);box-shadow:var(--shadow-menu);padding:4px}
.lib-row-dropdown.open{display:block}
:is(.lib-row-dropdown button,.lib-row-dropdown a){display:flex;align-items:center;gap:6px;width:100%;padding:8px 12px;border:none;border-radius:var(--radius);background:transparent;text-decoration:none;white-space:nowrap}
:is(.lib-row-dropdown button.danger,.lib-row-dropdown a.danger){color:var(--danger)}
:is(.lib-row-dropdown button.danger,.lib-row-dropdown a.danger):hover{background:color-mix(in srgb,var(--danger) 10%,transparent)}

/* ═══════════════════════ Keyframes ═══════════════════════ */
@keyframes skeletonShimmer{0%{background-position:100% 50%}100%{background-position:0 50%}}
@keyframes dotBounce{0%,80%,100%{opacity:.2;transform:scale(.8)}40%{opacity:1;transform:scale(1.1)}}
@keyframes toolSpin{to{transform:rotate(360deg)}}
@keyframes thinkPulse{0%,100%{opacity:var(--opacity-muted)}50%{opacity:1}}
@keyframes convert-pulse{0%,100%{background:transparent}50%{background:var(--accent)}}
@keyframes emptyFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes toastIn{from{opacity:0;transform:translateY(12px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes toastOut{from{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(-8px) scale(.95)}}

/* ── Settings search ── */
.settings-header{position:relative}
.settings-header-actions{display:flex;align-items:center;gap:12px}
.settings-search{width:180px;height:28px;font-size:var(--fs-sm);border-radius:9999px;padding:0 12px 0 30px;background:var(--surface);border:none;outline:none;transition:border-color var(--transition-fast);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:10px center}
.settings-search:focus{border-color:var(--accent)}
.settings-search::placeholder{color:var(--muted);font-size:var(--fs-sm)}

/* ── Settings subcategory headers ── */
.settings-subheader{font-size:var(--fs-sm);font-weight:700;color:var(--fg);text-transform:uppercase;letter-spacing:.5px;padding:12px 0 8px;margin-top:8px;border-top:1px solid var(--border)}

/* ── Password wrapper + toggle ── */
.pw-wrapper{position:relative;display:flex;align-items:center}
.pw-wrapper input{padding-right:36px!important}
.pw-toggle{position:absolute;right:2px;top:50%;transform:translateY(-60%);width:30px;height:30px;border:none;background:transparent;color:var(--muted);border-radius:var(--radius);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:color var(--transition-fast)}
.pw-toggle:hover{color:var(--fg)}

/* ── Validation feedback ── */
.settings-category input.invalid{border-color:var(--danger)!important}
.hint-error{color:var(--danger)!important}

/* ── Chat message avatar ── */
.msg-avatar{width:24px;height:24px;border-radius:50%;flex-shrink:0;background:var(--accent);background-size:cover;background-position:center;display:none}
.msg[data-role="user"] .msg-avatar{display:block}
.msg[data-role="user"]{display:flex;gap:8px;align-items:flex-start}

/* Profile modal account section */
.profile-account {
  width: 100%; margin-top: 4px; padding-top: 16px;
  border-top: 1px solid var(--border);
}
.profile-account .field {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 12px;
}
.profile-account .field label { margin-bottom: 0; flex-shrink: 0; }
.profile-email {
  font-size: var(--fs-base); color: var(--fg); text-align: right;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.profile-logout-btn {
  width: 100%; height: 34px;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 0 10px; border: 1px solid var(--border); border-radius: var(--radius);
  background: none; color: var(--muted);
  font-size: var(--fs-base); font-family: var(--font);
  cursor: pointer; transition: all var(--transition-fast);
}
.profile-logout-btn:hover {
  background: color-mix(in srgb, var(--danger) 8%, transparent);
  border-color: var(--danger);
  color: var(--danger);
}

/* ═══════════════════════ Mobile Responsive ═══════════════════════ */
@media (max-width: 768px) {

  /* ── Base grid: 2 columns (icon strip + content) ── */
  #layout {
    grid-template-columns: 52px 1fr;
  }

  /* ── Left strip: icons only, centered ── */
  #left-strip {
    padding: 0.5rem 0;
    padding-top: calc(0.5rem + env(safe-area-inset-top, 0px));
    align-items: center;
    gap: 2px;
  }
  #left-strip .strip-label {
    display: none !important;
  }
  #left-strip button {
    justify-content: center;
    padding: 0;
    width: 44px;
    height: 44px;
    border-radius: var(--radius);
    gap: 0;
  }
  #left-strip .strip-tab.active {
    background: var(--surface);
  }
  #left-strip .strip-tab.active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 25%;
    height: 50%;
    width: 3px;
    background: var(--accent);
    border-radius: 0 3px 3px 0;
  }
  #strip-profile {
    justify-content: center;
    padding: 0;
    width: 44px;
    height: 44px;
    margin-bottom: 4px;
  }
  .strip-avatar {
    width: 24px;
    height: 24px;
  }

  /* ── All content panels in column 2 ── */
  #sidebar, #chat-list-panel, #editor, #editor-chat, .view-page {
    grid-column: 2 !important;
  }

  /* ── Notes: single panel at a time ── */
  #layout.view-notes:not(.has-active-note) #editor {
    display: none !important;
  }
  #layout.view-notes.has-active-note #sidebar {
    display: none !important;
  }

  /* ── Chat: single panel at a time ── */
  #layout.view-chat:not(.has-active-chat) #editor-chat {
    display: none !important;
  }
  #layout.view-chat.has-active-chat #chat-list-panel {
    display: none !important;
  }

  /* ── Drill-down: full-width, hide icon strip ── */
  #layout.view-notes.has-active-note,
  #layout.view-chat.has-active-chat {
    grid-template-columns: 1fr;
  }
  #layout.view-notes.has-active-note #left-strip,
  #layout.view-chat.has-active-chat #left-strip {
    display: none !important;
  }
  #layout.view-notes.has-active-note #editor,
  #layout.view-chat.has-active-chat #editor-chat {
    grid-column: 1 !important;
  }

  /* ── Mobile back button (fixed floating, no header) ── */
  .mobile-back-btn {
    display: none;
    position: fixed;
    top: calc(12px + env(safe-area-inset-top, 0px));
    left: 12px;
    z-index: var(--z-sticky);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--fg);
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
  .mobile-back-btn:hover {
    background: var(--surface-hover);
  }

  /* Show back button only when drill-down is active on mobile */
  #layout.view-notes.has-active-note #editor-back-btn {
    display: flex !important;
  }
  #layout.view-chat.has-active-chat #chat-back-btn {
    display: flex !important;
  }

  /* ── Tighten padding ── */
  #editor-textarea {
    padding: max(7vmin, 90px) 7vmin max(7vmin, 90px);
    max-width: 100%;
    overflow-x: hidden;
    word-break: break-word;
    overflow-wrap: break-word;
  }
  #editor-textarea .ProseMirror {
    word-break: break-word;
    overflow-wrap: break-word;
  }
  #editor-chat #chat-messages {
    max-width: 100%;
    padding: 3.5rem 12px 12px;
    overflow-x: hidden;
  }
  .chat-view-input {
    max-width: 100%;
    padding: 8px 12px 12px;
  }
  #chat-input {
    padding: 12px 80px 12px 12px;
    min-height: 60px;
  }
  #sidebar, #chat-list-panel {
    padding: 8px;
    padding-top: calc(8px + env(safe-area-inset-top, 0px));
  }
  :is(#sidebar, #chat-list-panel) > header {
    padding: 6px 8px;
  }
  .view-page {
    padding-top: env(safe-area-inset-top, 44px);
  }
  .view-page-header {
    padding: 12px 16px;
  }
  #view-library .view-page-header {
    padding: 12px 16px;
    flex-wrap: wrap;
    gap: 8px;
  }
  #view-library .library-header-actions {
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
  }
  #library-search {
    flex: 1;
    min-width: 0;
  }
  .library-controls {
    padding: 8px 16px;
  }
  .view-page-header h2 {
    font-size: var(--fs-xl);
  }
  .view-page-body {
    padding: 16px;
    max-width: 100%;
  }
  #view-library .view-page-body {
    padding: 12px 16px;
  }

  /* ── Scrolling tables, code blocks, long strings ── */
  .wysiwyg-table,
  .msg-content .wysiwyg-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .wysiwyg-table table,
  .msg-content table {
    min-width: 100%;
    white-space: nowrap;
  }
  .wysiwyg-table :is(th, td),
  .msg-content :is(th, td) {
    white-space: nowrap;
  }
  pre, .wysiwyg-code-block > pre, .msg-content pre {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
  .wysiwyg-code-block code {
    white-space: pre;
    word-break: normal;
    overflow-wrap: normal;
  }
  .msg-content pre code {
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: break-word;
  }
  .msg-content {
    word-break: break-word;
    overflow-wrap: break-word;
  }

  /* ── Hide desktop tooltips on touch ── */
  .chat-model-btn::after,
  #send-btn::after,
  #file-btn::after {
    display: none !important;
  }

  /* ── List items: taller touch targets ── */
  #note-list>[data-id],
  #chat-list>[data-chat-id] {
    padding: 6px 12px;
    margin-left: 0;
    min-height: 40px;
  }

  /* ── Library controls wrap ── */
  .library-controls {
    flex-wrap: wrap;
    gap: 8px;
  }
  .library-filters {
    flex-wrap: wrap;
  }
}