/* Erynne — sakura theme. Background art: sakura.jpg (blossoms, Mt Fuji, pagoda). */

:root {
  --blush: #fbeef0;          /* sky */
  --petal: #f4b6c2;          /* blossoms */
  --petal-soft: #fadbe1;
  --rose: #c25a72;           /* accent: buttons, links */
  --rose-deep: #9c4157;      /* hover */
  --bark: #8a5560;           /* branches / pagoda */
  --ink: #3d2530;            /* text */
  --muted: #8a6b74;
  --glass: rgba(255, 250, 251, 0.78);
  --glass-strong: rgba(255, 252, 253, 0.92);
  --line: rgba(194, 90, 114, 0.18);
  --shadow: 0 8px 30px rgba(156, 65, 87, 0.12);
  --error: #b3263e;
  --ok-bg: #e3f4e6; --ok-fg: #2b6a3a;
  --bad-bg: #fde2e6; --bad-fg: #a3263d;
  --busy-bg: #f7e1ec; --busy-fg: #8c3a63;
  --scene-tint: rgba(253, 240, 243, 0.35);
  --radius: 14px;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Noto Serif", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* What the top bar and the announcement cards take (nav.js measures it); the full-height pages
     are the viewport minus this. dvh follows the phone's address bar; vh is the fallback. */
  --chrome: 3.6rem;
  --page-h: calc(100vh - var(--chrome));
}
@supports (height: 100dvh) {
  :root { --page-h: calc(100dvh - var(--chrome)); }
  body { min-height: 100dvh; }
  .login { min-height: 100dvh; }
}

@media (prefers-color-scheme: dark) {
  :root {
    --rose: #f08aa2;
    --rose-deep: #f6a9bb;
    --ink: #f6e7eb;
    --muted: #c8a9b2;
    --glass: rgba(43, 24, 34, 0.78);
    --glass-strong: rgba(48, 27, 38, 0.92);
    --line: rgba(240, 138, 162, 0.2);
    --shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
    --error: #ff9fb0;
    --ok-bg: #1f3a28; --ok-fg: #a8dcb5;
    --bad-bg: #4a1f2a; --bad-fg: #ffb3c1;
    --busy-bg: #3d2338; --busy-fg: #f2bfd9;
    --scene-tint: rgba(28, 12, 22, 0.62);   /* night sakura */
  }
}

* { box-sizing: border-box; }
html { min-height: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font: 16px/1.55 var(--sans);
  background-color: var(--blush);
  background-image: linear-gradient(var(--scene-tint), var(--scene-tint)), url("/static/sakura.jpg");
  background-size: cover;
  background-position: center bottom;
  background-attachment: fixed;
}
h1, h2, h3 { font-family: var(--serif); font-weight: 600; letter-spacing: .01em; color: var(--ink); }
a { color: var(--rose); }
a:hover { color: var(--rose-deep); }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.error { color: var(--error); }
.push-right { margin-left: auto; }

button {
  background: var(--rose); color: #fff; border: 0; border-radius: 999px;
  padding: .55rem 1.2rem; font: inherit; font-weight: 500; cursor: pointer;
  box-shadow: 0 2px 8px rgba(194, 90, 114, .25);
  transition: background .15s, transform .05s;
}
button:hover { background: var(--rose-deep); }
button:active { transform: translateY(1px); }
button:disabled { opacity: .55; cursor: default; }
button.link { background: none; color: var(--rose); padding: 0; box-shadow: none; border-radius: 0; font-weight: normal; }
button.link:hover { color: var(--rose-deep); text-decoration: underline; }
button.danger { color: var(--error); }

input, textarea {
  width: 100%; padding: .6rem .8rem; font: inherit; color: var(--ink);
  background: var(--glass-strong); border: 1px solid var(--line); border-radius: 10px;
}
input:focus, textarea:focus, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--petal); outline-offset: 2px; border-color: var(--rose);
}
label { display: block; margin: .9rem 0; font-size: .95rem; }

/* Frosted glass panels over the scene */
.glass, .inbox, .doc, .history, .login-card {
  background: var(--glass);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* ------------------------------------------------------------ top bar */
.topbar {
  position: sticky; top: 0; z-index: 5;
  display: flex; gap: 1.25rem; align-items: center; padding: .7rem 1.25rem;
  background: var(--glass);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.brand { font-family: var(--serif); font-size: 1.25rem; font-weight: 600; text-decoration: none; color: var(--ink); }
.brand .blossom { display: inline-block; margin-right: .3rem; }
.tabs { display: flex; gap: .35rem; }
.topbar .notify-button { margin-left: auto; }
.kiosk-bar .kiosk-signin { margin-left: auto; color: var(--rose); text-decoration: none; padding: .3rem .8rem; }

/* A screen (the TV; base.html): everything inside its underscan, on every page; the TV page's own layout
   does that itself (media.css). A screen box's small bar (Back to TV, ‹ ›) gives way to the full top bar. */
html.tv:not(.tv-page) body { padding: var(--safe-yv, 0px) var(--safe-xv, 0px); }
html.tv:not(.tv-page) { --page-h: calc(100vh - var(--chrome) - var(--safe-yv, 0px) * 2); }
html.tv:not(.tv-page) .topbar { top: calc(var(--safe-yv, 0px) + var(--tv-strip, 0px)); }   /* under the small bar */
html.tv dialog { max-width: calc(100vw - var(--safe-xv, 0px) * 2 - 2rem); max-height: calc(100vh - var(--safe-yv, 0px) * 2 - 2rem); }
.tv-strip { position: sticky; top: var(--safe-yv, 0px); z-index: 27; display: flex; gap: .6rem; align-items: center;
            padding: .45rem 1rem; background: var(--glass-strong); border-bottom: 1px solid var(--line); }
body:has(> .topbar .tv-history) > .tv-strip { display: none; }
.tv-strip .tv-home { color: var(--rose); text-decoration: none; font-weight: 600; padding: .3rem .8rem; border-radius: 999px; }
.tv-history { display: inline-flex; gap: .3rem; }
.tv-history button { font-size: 1.3rem; line-height: 1; padding: .25rem .8rem; }
.tv-strip .tv-home:focus-visible, .tv-history button:focus-visible { outline: 3px solid var(--rose); outline-offset: 2px; }
/* A document on the TV (file_tv.html): the frame takes the rest of the screen. */
.tv-doc { height: var(--page-h); margin: 0; padding: 0; }
.tv-doc iframe { display: block; width: 100%; height: 100%; border: 0; background: #fff; }
/* Someone's phone wants the TV (screen_link.js): the countdown, over everything. */
.tv-takeover { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: rgba(8, 2, 14, .72); }
.tv-takeover[hidden] { display: none; }
.tv-takeover-card { max-width: min(36rem, calc(100vw - var(--safe-xv, 0px) * 2 - 2rem)); padding: 2rem 2.4rem; text-align: center; }
.tv-takeover-card h2 { margin: 0 0 .5rem; font-size: 1.8rem; }
.tv-takeover-card .tv-count { font-size: 3rem; font-weight: 700; color: var(--rose); margin: .4rem 0 1rem; }
.tv-takeover-card button { font-size: 1.2rem; padding: .7rem 1.6rem; }
.nav-menu { display: none; }
.nav-more { display: contents; }   /* a desktop: inline in the bar; a phone: the ☰ menu (below) */
.topbar.main-bar .brand { order: -2; }   /* the tabs live in .nav-more but sit after the brand on a desktop */
.topbar.main-bar .tabs { order: -1; }
.nav-more form { display: contents; }
.tabs a {
  text-decoration: none; color: var(--muted); padding: .3rem .8rem; border-radius: 999px;
}
.tabs a:hover { color: var(--ink); background: var(--petal-soft); }
.tabs a[aria-current="page"] { color: var(--rose-deep); background: var(--petal-soft); font-weight: 600; }
@media (prefers-color-scheme: dark) {
  .tabs a:hover, .tabs a[aria-current="page"] { background: rgba(240, 138, 162, .16); }
}

/* --------------------------------------------------------------- login */
.login { min-height: 100vh; display: grid; place-items: center; padding: 1rem; }
.login-card { width: min(24rem, 100%); padding: 2rem 2rem 1.5rem; text-align: left; }
.login-card h1 { margin: 0; font-size: 2.2rem; text-align: center; }
.login-card .tagline { text-align: center; margin-top: .25rem; }
.login-card button { width: 100%; margin-top: .5rem; padding: .7rem; }

/* ---------------------------------------------------------------- chat */
.chat-layout { display: grid; grid-template-columns: 17rem 1fr; gap: 1rem; padding: 1rem;
               height: var(--page-h); }
.history { padding: 1rem; overflow-y: auto; }
.history #new-chat { width: 100%; }
/* Advanced settings: the tool panel on the right of the chat (chat.js). */
.chat-layout.tools-open { grid-template-columns: 17rem 1fr 17rem; }
.tools-panel h2 { margin: 0 0 .3rem; }
.tools-panel details.tools-group { margin: .7rem 0 0; }
.tools-panel details.tools-group > summary { cursor: pointer; font-size: .78rem; text-transform: uppercase;
                                             letter-spacing: .04em; color: var(--muted); }
.tools-panel .tools-sub details.tools-group { margin: .2rem 0 0; }
.tools-panel .tools-sub details.tools-group > summary { text-transform: none; letter-spacing: 0; font-size: .85rem;
                                                        color: var(--ink); }
.tools-panel .tools-sub { display: block; padding: 0; }
.tools-panel .tools-sub .tool-items { margin-left: 1rem; }
.tools-panel .tools-count { margin-left: .2rem; text-transform: none; }
.tools-panel .tool-items { margin: .2rem 0 0; }
.tools-panel .tool-items li { justify-content: flex-start; flex-wrap: wrap; gap: .1rem .4rem; padding: .1rem 0; }
.history ul { list-style: none; padding: 0; margin: 1rem 0 0; }
.history li { display: flex; align-items: center; justify-content: space-between; gap: .5rem;
              padding: .4rem .6rem; border-radius: 10px; }
.history li:hover { background: var(--petal-soft); }
.history li.active { background: var(--petal-soft); }
.history li a { text-decoration: none; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.history li.active a { font-weight: 600; }
@media (prefers-color-scheme: dark) {
  .history li:hover, .history li.active { background: rgba(240, 138, 162, .14); }
}

.chat { display: flex; flex-direction: column; min-height: 0; }
#thread { flex: 1; overflow-y: auto; padding: .5rem 1rem 1rem; max-width: 52rem; width: 100%; margin: 0 auto; }
.welcome {
  margin: 8vh auto 0; max-width: 34rem; text-align: center; padding: 2rem;
  background: var(--glass); border: 1px solid var(--line); border-radius: var(--radius);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: var(--shadow);
}
.welcome h1 { margin: 0 0 .5rem; font-size: 2rem; }
.msg { margin: 1rem 0; line-height: 1.6; }
.msg.user {
  width: fit-content; max-width: 78%; margin-left: auto; padding: .7rem 1rem; white-space: pre-wrap;
  background: var(--rose); color: #fff; border-radius: 18px 18px 4px 18px; box-shadow: var(--shadow);
}
@media (prefers-color-scheme: dark) { .msg.user { color: #2b1018; } }
.msg.assistant {
  margin-right: 6%; padding: .9rem 1.1rem;
  background: var(--glass-strong); border: 1px solid var(--line); border-radius: 18px 18px 18px 4px;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: var(--shadow);
}
.msg.assistant .answer { white-space: pre-wrap; }
.msg.not-found .answer { color: var(--muted); font-style: italic; }
.route-label { margin-bottom: .35rem; font-style: italic; }
.route-label::before { content: "💬 "; font-style: normal; }
.status { margin-bottom: .3rem; }
.status::before { content: "🌸 "; display: inline-block; animation: spin 2.4s linear infinite; }
a.cite {
  font-size: .72rem; vertical-align: super; text-decoration: none; font-weight: 600;
  padding: .05rem .35rem; margin: 0 .05rem; border-radius: 999px;
  background: var(--petal-soft); color: var(--rose-deep);
}
a.cite:hover { background: var(--petal); }
@media (prefers-color-scheme: dark) { a.cite { background: rgba(240, 138, 162, .2); } }
.sources-title { margin-top: .9rem; font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; }
.sources { margin: .3rem 0 0; padding-left: 1.4rem; font-size: .9rem; }
.sources li { margin: .15rem 0; }
.sources li::marker { color: var(--rose); font-weight: 600; }
.feedback { margin-top: .5rem; display: flex; gap: .6rem; }
.feedback button { font-size: 1.05rem; text-decoration: none; filter: grayscale(.3); }
.feedback button:hover { filter: none; text-decoration: none; }

.ask-scope { max-width: 52rem; width: 100%; margin: 0 auto .4rem; }
.ask {
  display: flex; gap: .6rem; align-items: flex-end; max-width: 52rem; width: 100%; margin: 0 auto;
  padding: .7rem; background: var(--glass); border: 1px solid var(--line); border-radius: 22px;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: var(--shadow);
}
.ask textarea { flex: 1; resize: none; border: 0; background: transparent; min-height: 2.6rem; }
.ask textarea:focus { outline: none; }
.ask button { padding: .6rem 1.4rem; }

/* ------------------------------------------------------- files / memories */
.inbox { max-width: 54rem; margin: 1.5rem auto; padding: 1.5rem 2rem; }
.inbox > p.muted:first-child { margin-top: 0; }
.tag {
  font-family: var(--sans); font-size: .72rem; font-weight: 600; letter-spacing: .03em;
  padding: .12rem .55rem; border-radius: 999px; vertical-align: middle;
  background: var(--petal-soft); color: var(--bark);
}
.tag.private { background: var(--rose); color: #fff; }
.collection { margin: 1.75rem 0; }
.collection-head { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
                   padding-bottom: .5rem; border-bottom: 1px solid var(--line); }
.collection-head h2 { font-size: 1.2rem; margin: 0; }
.upload-button {
  margin: 0 0 0 auto; background: var(--rose); color: #fff; border-radius: 999px;
  padding: .45rem 1rem; cursor: pointer; font-size: .95rem; box-shadow: 0 2px 8px rgba(194, 90, 114, .25);
}
.upload-button:hover { background: var(--rose-deep); }
.dropzone { border: 2px dashed var(--rose); border-radius: var(--radius); padding: 1.5rem; margin-top: .75rem;
            text-align: center; color: var(--rose-deep); background: var(--petal-soft); }
.files { list-style: none; padding: 0; margin: .5rem 0 0; }
.file { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .75rem; padding: .65rem .25rem;
        border-bottom: 1px solid var(--line); }
.file:last-child { border-bottom: 0; }
.file-name { font-weight: 500; overflow-wrap: anywhere; text-decoration: none; }
.file-meta { font-size: .85rem; }
.file-actions { margin-left: auto; display: flex; gap: .9rem; }
.file-detail { flex-basis: 100%; font-size: .85rem; }
.file-detail.note { color: var(--muted); font-style: italic; }
.badge { font-size: .75rem; font-weight: 600; padding: .12rem .6rem; border-radius: 999px; }
.badge.ready { background: var(--ok-bg); color: var(--ok-fg); }
.badge.failed { background: var(--bad-bg); color: var(--bad-fg); }
.badge.processing, .badge.queued { background: var(--busy-bg); color: var(--busy-fg); }

.memories { list-style: none; padding: 0; }
.memories li { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem .25rem;
               border-bottom: 1px solid var(--line); }
.memories li span::before { content: "🌸 "; }
.badge.stored { background: var(--petal-soft); color: var(--bark); }
@media (prefers-color-scheme: dark) { .badge.stored { background: rgba(240, 138, 162, .14); color: var(--muted); } }

/* ------------------------------------------------------- file manager */
.fm {
  display: grid; grid-template-columns: 15.5rem minmax(0, 1fr) auto; gap: .9rem;
  height: var(--page-h); padding: .9rem;
}
.fm-side, .fm-main, .fm-info { min-height: 0; overflow: auto; }
.fm-side { padding: .6rem .3rem; }
.fm-main { position: relative; display: flex; flex-direction: column; overflow: hidden; }
.fm-info { width: 21rem; padding: 1rem 1.1rem; }
.fm-info[hidden] { display: none; }

/* tree (also used by the location picker) */
.tree, .tree ul { list-style: none; margin: 0; padding: 0; }
.tree-row { display: flex; align-items: center; border-radius: 8px; }
.tree-row.current, .tree-label.selected { background: var(--petal-soft); }
.tree-row.current .tree-label { color: var(--rose-deep); font-weight: 600; }
.tree-row.drop-here, .crumb.drop-here, .row.drop-here, .tile.drop-here { outline: 2px dashed var(--rose); outline-offset: -2px; background: var(--petal-soft); }
.tree-toggle { width: 1.4rem; flex: none; padding: 0; background: none; box-shadow: none; color: var(--muted); border-radius: 4px; }
.tree-toggle:hover { background: none; color: var(--ink); }
.tree-toggle:disabled { opacity: 1; }
.tree-label {
  flex: 1; min-width: 0; text-align: left; background: none; box-shadow: none; color: var(--ink);
  border-radius: 8px; padding: .32rem .5rem; font-weight: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tree-label:hover { background: var(--petal-soft); color: var(--ink); }
.tree-bin .tree-label { color: var(--muted); }
@media (prefers-color-scheme: dark) {
  .tree-row.current, .tree-label.selected, .tree-label:hover,
  .tree-row.drop-here, .crumb.drop-here, .row.drop-here, .tile.drop-here { background: rgba(240, 138, 162, .16); }
}

/* toolbar */
.fm-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; padding: .6rem .8rem;
              border-bottom: 1px solid var(--line); }
.fm-toolbar [hidden] { display: none !important; }
.fm-toolbar .grow { flex: 1; }
.fm-toolbar .sep { width: 1px; height: 1.4rem; background: var(--line); margin: 0 .2rem; }
.fm-toolbar > button:not(.tool), .menu-wrap > button { padding: .4rem .95rem; }
button.tool {
  background: transparent; color: var(--ink); box-shadow: none; border-radius: 8px;
  padding: .35rem .6rem; font-weight: normal; font-size: .92rem;
}
button.tool:hover:not(:disabled) { background: var(--petal-soft); color: var(--ink); }
button.tool.danger { color: var(--error); }
button.tool[aria-pressed="true"] { background: var(--petal-soft); color: var(--rose-deep); }
button.tool:disabled { opacity: .4; }
@media (prefers-color-scheme: dark) {
  button.tool:hover:not(:disabled), button.tool[aria-pressed="true"] { background: rgba(240, 138, 162, .16); }
}
.seg { display: flex; }
#fm-search { width: 13rem; padding: .35rem .7rem; }
#fm-sort { font: inherit; font-size: .9rem; color: var(--ink); background: var(--glass-strong);
           border: 1px solid var(--line); border-radius: 8px; padding: .3rem .4rem; }

/* menus (upload menu, context menu) */
.menu-wrap { position: relative; }
.menu {
  position: absolute; z-index: 20; min-width: 12rem; padding: .3rem; display: flex; flex-direction: column;
  background: var(--glass-strong); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow);
}
.menu[hidden] { display: none; }
.menu-wrap .menu { top: calc(100% + .3rem); left: 0; }
.ctx { position: fixed; }
.menu button {
  text-align: left; background: none; box-shadow: none; color: var(--ink); border-radius: 6px;
  padding: .4rem .7rem; font-weight: normal;
}
.menu button:hover:not(:disabled), .menu button:focus-visible { background: var(--petal-soft); color: var(--ink); }
.menu button.danger { color: var(--error); }
.menu hr { border: 0; border-top: 1px solid var(--line); margin: .25rem .3rem; }
@media (prefers-color-scheme: dark) { .menu button:hover:not(:disabled) { background: rgba(240, 138, 162, .16); } }

/* breadcrumb */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem; padding: .55rem .9rem .3rem; }
.crumb { background: none; box-shadow: none; color: var(--rose); padding: .15rem .4rem; border-radius: 6px;
         font-weight: 500; font-family: var(--serif); font-size: 1.05rem; }
.crumb:hover { background: var(--petal-soft); color: var(--rose-deep); }
.crumb.current { color: var(--ink); }
.crumb-sep { color: var(--muted); }
.fm-note { margin: 0 .9rem .3rem; font-size: .88rem; }

/* list and grid */
.fm-list { flex: 1; overflow: auto; padding: 0 .5rem .5rem; outline: none; align-content: start; }
.fm-list:focus-visible { box-shadow: inset 0 0 0 1px var(--line); }
.fm-empty { text-align: center; margin: 2rem 1rem; }
.row {
  display: grid; grid-template-columns: 1.6rem minmax(0, 1fr) 9.5rem 5.5rem 7rem; align-items: center; gap: .6rem;
  padding: .38rem .5rem; border-radius: 8px; cursor: default; user-select: none;
}
.fm-list.trash .row { grid-template-columns: 1.6rem minmax(0, 1fr) minmax(6rem, 12rem) 7rem 7rem; }
.fm-list.search .row { grid-template-columns: 1.6rem minmax(0, 1fr) minmax(6rem, 16rem) 5.5rem 7rem; }
.fm-list.with-claude .row, .fm-list.with-ai .row { grid-template-columns: 1.6rem minmax(0, 1fr) 9.5rem 4.5rem 5.5rem 7rem; }
.fm-list.with-claude.with-ai .row { grid-template-columns: 1.6rem minmax(0, 1fr) 9.5rem 4.5rem 4.5rem 5.5rem 7rem; }
.c-claude { text-align: center; font-size: .85rem; }
.c-claude input { width: 1rem; height: 1rem; margin: 0; accent-color: var(--rose); cursor: pointer; }
.c-claude input:disabled { cursor: not-allowed; opacity: .55; }
.row.head { position: sticky; top: 0; z-index: 1; font-size: .78rem; font-weight: 600; letter-spacing: .03em;
            text-transform: uppercase; color: var(--muted); background: var(--glass-strong); border-radius: 0; }
.row:not(.head):hover, .tile:hover { background: rgba(244, 182, 194, .22); }
.row.selected, .tile.selected { background: var(--petal-soft); box-shadow: inset 3px 0 0 var(--rose); }
@media (prefers-color-scheme: dark) {
  .row:not(.head):hover, .tile:hover { background: rgba(240, 138, 162, .08); }
  .row.selected, .tile.selected { background: rgba(240, 138, 162, .18); }
}
.c-name { display: flex; align-items: center; gap: .55rem; min-width: 0; }
.c-name .nm, .tile .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-status, .c-where, .c-who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .88rem; }
.c-size, .c-date { font-size: .85rem; text-align: right; white-space: nowrap; }
input.c-check { width: 1rem; height: 1rem; margin: 0; accent-color: var(--rose); }
.row.head .c-check { visibility: hidden; }
.ico { font-size: 1.15rem; line-height: 1; flex: none; }
.ico.big { font-size: 2.6rem; }
.row.status-queued .nm, .row.status-processing .nm { color: var(--muted); }

.fm-list.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: .5rem; padding-top: .4rem; }
.tile {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: .35rem;
  padding: .9rem .5rem .7rem; border-radius: 10px; text-align: center; user-select: none;
}
.tile .nm { max-width: 100%; font-size: .9rem; }
.tile input.c-check { position: absolute; top: .45rem; left: .45rem; opacity: 0; }
.tile:hover input.c-check, .tile.selected input.c-check { opacity: 1; }
.tile .badge { font-size: .68rem; }

.drop-overlay {
  position: absolute; inset: 0; z-index: 10; display: grid; place-items: center; pointer-events: none;
  background: rgba(250, 219, 225, .72); border: 3px dashed var(--rose); border-radius: var(--radius);
  color: var(--rose-deep); font-family: var(--serif); font-size: 1.4rem;
}
.drop-overlay[hidden] { display: none; }
@media (prefers-color-scheme: dark) { .drop-overlay { background: rgba(43, 24, 34, .8); } }

/* details pane */
.info-head { display: flex; align-items: center; gap: .7rem; margin-bottom: .8rem; }
.info-head h3 { margin: 0; font-size: 1.05rem; overflow-wrap: anywhere; }
.preview { height: 19rem; border-radius: 10px; overflow: hidden; background: var(--glass-strong);
           border: 1px solid var(--line); display: grid; place-items: center; }
.preview iframe { width: 100%; height: 100%; border: 0; background: #fff; }
.preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
.preview p { padding: 1rem; text-align: center; }
.info-actions { display: flex; gap: .5rem; margin: .8rem 0; }
.button-like {
  display: inline-block; text-decoration: none; background: var(--rose); color: #fff; border-radius: 999px;
  padding: .4rem 1rem; font-size: .92rem; font-weight: 500;
}
.button-like:hover { background: var(--rose-deep); color: #fff; }
.button-like.soft { background: var(--petal-soft); color: var(--rose-deep); }
@media (prefers-color-scheme: dark) {
  .button-like, .button-like:hover { color: #2b1822; }
  .button-like.soft { background: rgba(240, 138, 162, .16); color: var(--rose-deep); }
}
.fm-info dl { display: grid; grid-template-columns: auto 1fr; gap: .35rem .9rem; font-size: .9rem; margin: .5rem 0; }
.fm-info dt { color: var(--muted); }
.fm-info dd { margin: 0; overflow-wrap: anywhere; }
.note { color: var(--muted); font-style: italic; }

/* dialogs */
.dlg { width: min(26rem, calc(100vw - 2rem)); padding: 1.2rem 1.4rem; color: var(--ink); background: var(--glass-strong); }
.dlg::backdrop { background: rgba(61, 37, 48, .35); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.dlg h2 { margin: 0 0 .8rem; font-size: 1.2rem; }
.dlg-actions { display: flex; justify-content: flex-end; align-items: center; gap: 1rem; margin-top: 1rem; }
.dlg.props, .dlg.wide { width: min(32rem, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); overflow: auto; }
.dlg-grid { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .5rem .8rem; align-items: center; }
.dlg-grid input, .dlg-grid select { width: 100%; padding: .35rem .5rem; }
.acct-sec .ax-link select { width: auto; }
.acct-groups { display: flex; flex-wrap: wrap; gap: .3rem 1rem; }
.ax-bar { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.ax-bar p { margin-top: 0; }
.ax-name { font-weight: 600; padding: 0; }
.ax-off .ax-name { opacity: .6; text-decoration: line-through; }
.props-h { margin: 1rem 0 .4rem; font-size: .8rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
           color: var(--muted); }
.props-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.props-table th { text-align: left; font-weight: 500; color: var(--muted); padding: .2rem .8rem .2rem 0; width: 8rem;
                  vertical-align: top; white-space: nowrap; }
.props-table td { padding: .2rem 0; overflow-wrap: anywhere; }
.props-actions { margin-top: .5rem; }
.props-switch { display: flex; align-items: center; gap: .5rem; margin-top: .4rem; }
.props-switch input { width: 1rem; height: 1rem; margin: 0; accent-color: var(--rose); }
.props-switch input:disabled { opacity: .55; }
.props-switch + p { margin: .15rem 0 .2rem 1.5rem; }
button.danger-fill { background: var(--error); }
.picker-tree { max-height: 50vh; overflow-y: auto; overflow-x: hidden; border: 1px solid var(--line); border-radius: 10px; padding: .3rem; }
.picker-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.picker-tree ul[hidden] { display: none; }

/* upload queue */
.queue { position: fixed; right: 1rem; bottom: 1rem; z-index: 30; width: min(24rem, calc(100vw - 2rem));
         background: var(--glass-strong); }
.queue[hidden] { display: none; }
.queue header { display: flex; align-items: center; gap: .8rem; padding: .6rem .9rem; border-bottom: 1px solid var(--line); }
.queue header strong { flex: 1; font-size: .95rem; }
.queue ul { list-style: none; margin: 0; padding: .3rem .6rem .6rem; max-height: 16rem; overflow: auto; }
.queue.min ul { display: none; }
.q-item { display: grid; grid-template-columns: 1.4rem minmax(0, 1fr) auto; align-items: center; gap: .1rem .5rem;
          padding: .35rem 0; border-bottom: 1px solid var(--line); }
.q-item:last-child { border-bottom: 0; }
.q-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .88rem; }
.q-bar { grid-column: 2 / 4; height: 4px; border-radius: 4px; background: var(--petal-soft); overflow: hidden; }
.q-fill { display: block; height: 100%; width: 0; background: var(--rose); transition: width .2s; }
.q-detail { grid-column: 2 / 4; }
.q-done .q-fill { background: var(--ok-fg); }
.q-failed .q-fill { background: var(--error); width: 100% !important; }
.q-failed .q-detail { color: var(--error); }
.q-indexing .q-fill { width: 100% !important; opacity: .55; }

.toast {
  position: fixed; left: 50%; bottom: 1.2rem; transform: translateX(-50%); z-index: 40;
  max-width: min(36rem, calc(100vw - 2rem)); padding: .6rem 1.1rem; border-radius: 999px;
  background: var(--ink); color: var(--blush); box-shadow: var(--shadow); font-size: .92rem;
}
.toast.error { background: var(--error); color: #fff; }
.toast[hidden] { display: none; }

/* admin: libraries */
.admin { max-width: 60rem; }
.lib { border-top: 1px solid var(--line); padding: 1rem 0; }
.lib-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1rem; }
.lib-head h2 { margin: 0; font-size: 1.15rem; }
.grants { list-style: none; padding: 0; margin: .6rem 0; }
.grants li { display: flex; align-items: center; gap: .8rem; padding: .3rem 0; }
.grants li span:first-child { flex: 1; }
.grants select, .grant-add select { font: inherit; font-size: .9rem; color: var(--ink); background: var(--glass-strong);
  border: 1px solid var(--line); border-radius: 8px; padding: .25rem .4rem; }
.grant-add { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.new-lib { display: flex; gap: .6rem; margin: 1rem 0 1.5rem; }
.new-lib input { flex: 1; }
.admin-section { margin: 2.2rem 0 .3rem; font-size: 1.3rem; }
.lib-head h3 { margin: 0; font-size: 1.1rem; }
.claude-row { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem 1rem; margin-top: .4rem; }
.check { display: inline-flex; align-items: center; gap: .3rem; cursor: pointer; white-space: nowrap; }
.table-wrap { overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.admin-table th, .admin-table td { text-align: left; padding: .35rem .6rem; border-bottom: 1px solid var(--line);
  vertical-align: top; }
.admin-table th { font-weight: 600; color: var(--muted); }

/* chat: "search in" chip */
.scope-chip { display: inline-flex; align-items: center; gap: .35rem; font-size: .85rem; padding: .25rem .7rem;
              background: var(--petal-soft); color: var(--rose-deep); border-radius: 999px; box-shadow: none; font-weight: 500; }
.scope-chip:hover { background: var(--petal); color: var(--ink); }
.msg .scope-chip { margin-bottom: .35rem; cursor: default; }
@media (prefers-color-scheme: dark) { .scope-chip { background: rgba(240, 138, 162, .16); } }

.crumbs-row { display: flex; align-items: center; }
.crumbs-row .crumbs { flex: 1; min-width: 0; }
.fm-tree-button, .fm-phone, .info-close { display: none; }
@media (max-width: 1100px) {
  .fm { grid-template-columns: 13rem minmax(0, 1fr); }
  .fm-info { position: fixed; right: .9rem; top: calc(var(--chrome) + .8rem); bottom: .9rem; z-index: 15; box-shadow: var(--shadow); }
}
@media (max-width: 760px) {
  .fm { grid-template-columns: minmax(0, 1fr); padding: .5rem; }
  .fm-side.drawer { padding: .6rem .3rem; }
  .fm-tree-button { display: inline-block; margin-left: .4rem; }
  .fm-phone { display: inline-block; }
  .fm-toolbar .fm-desk { display: none !important; }
  .fm-toolbar { gap: .25rem; padding: .45rem .5rem; }
  .row { grid-template-columns: 1.6rem minmax(0, 1fr) 5rem; }
  .row .c-size, .row .c-date, .row .c-who { display: none; }
  .fm-list.trash .row, .fm-list.search .row { grid-template-columns: 1.6rem minmax(0, 1fr) 6rem; }
  .fm-list.with-claude .row, .fm-list.with-ai .row { grid-template-columns: 1.6rem minmax(0, 1fr) 5rem 3.5rem; }
  .fm-list.with-claude.with-ai .row { grid-template-columns: 1.6rem minmax(0, 1fr) 5rem 3.5rem 3.5rem; }
  #fm-search { width: 100%; order: 10; }
  /* The details: a sheet over the list, from under the bar to the bottom, with its own ✕. */
  .fm-info { left: .5rem; right: .5rem; bottom: .5rem; top: calc(var(--chrome) + .5rem); width: auto; z-index: 25; }
  .info-close { display: inline-block; float: right; margin: 0 0 .3rem .5rem; }
  /* In select mode every checkbox shows; otherwise a tap opens, so the tile's box stays out of the way. */
  .fm-list.selecting .tile input.c-check { opacity: 1; }
}

/* ---------------------------------------------------- rendered Markdown */
.doc { max-width: 50rem; margin: 1.5rem auto; padding: 1.5rem 2.25rem; background: var(--glass-strong); }
.doc pre, .help-body pre, .wiki-body pre { overflow-x: auto; background: var(--petal-soft); padding: .8rem 1rem; border-radius: 10px; }
@media (prefers-color-scheme: dark) { .doc pre, .help-body pre, .wiki-body pre { background: rgba(240, 138, 162, .1); } }
.doc table, .help-body table, .wiki-body table { border-collapse: collapse; }
.doc th, .doc td, .help-body th, .help-body td, .wiki-body th, .wiki-body td { border: 1px solid var(--line); padding: .35rem .7rem; }
.doc :target, .help-body :target, .wiki-body :target { background: var(--petal-soft); border-radius: 6px; scroll-margin-top: 5rem;
               box-shadow: 0 0 0 .4rem var(--petal-soft); }
@media (prefers-color-scheme: dark) { .doc :target, .help-body :target, .wiki-body :target { background: rgba(240, 138, 162, .18); box-shadow: none; } }
.doc img, .help-body img, .wiki-body img, .message-text img, .notice-body img { max-width: 100%; height: auto; }
.doc table, .help-body table, .wiki-body table { display: block; max-width: 100%; overflow-x: auto; }
.doc code, .help-body code, .wiki-body code { overflow-wrap: anywhere; }
.help-body > :first-child, .wiki-body > :first-child { margin-top: 0; }
.help-body h1, .wiki-body h1 { font-size: 1.6rem; }
.help-body h2, .wiki-body h2 { font-size: 1.25rem; margin-top: 1.6rem; }
.help-body code, .wiki-body code { font-size: .9em; }
.help-body blockquote, .wiki-body blockquote { margin: 1rem 0; padding: .2rem 1rem; border-left: 3px solid var(--rose); color: var(--muted); }

.proposal-summary { margin: .3rem 0 .4rem; font-weight: 500; }

/* ---------------------------------------------- messages and announcements */
.badge.unread { display: inline-block; min-width: 1.3em; margin-left: .35rem; padding: 0 .4em; border-radius: 999px;
  background: var(--rose); color: #fff; font-size: .72rem; font-weight: 600; line-height: 1.5; text-align: center;
  vertical-align: middle; }
.badge.unread[hidden] { display: none; }
.notices { max-width: 60rem; margin: .8rem auto 0; padding: 0 1rem; display: grid; gap: .6rem; position: relative; z-index: 1; }
.notices[hidden] { display: none; }
.notice { padding: .8rem 1.1rem; border-left: 4px solid var(--rose); }
.notice.must-ack { border-left-color: var(--error); }
.notice-head { display: flex; gap: .5rem; align-items: baseline; }
.notice-icon { font-size: 1.1rem; }
.notice-body { margin-top: .3rem; }
.notice-body > :first-child { margin-top: 0; }
.notice-body > :last-child { margin-bottom: 0; }
.notice-actions { display: flex; gap: .8rem; align-items: center; margin-top: .5rem; }
.message-list { list-style: none; margin: 0; padding: 0; }
.message { padding: .7rem 0; border-bottom: 1px solid var(--line); }
.message.unread { cursor: pointer; }
.message.unread .message-text { font-weight: 500; }
.message.system .message-head strong { color: var(--rose-deep); }
.message-text { margin: .25rem 0; white-space: pre-wrap; }
.message.wanted { background: var(--petal-soft); border-radius: 8px; padding-left: .5rem; }
/* The Messages button in the top bar, and the fullscreen panel it grows into (messages.js). */
.notify-button { position: relative; display: inline-flex; align-items: center; border: 0; background: none; color: var(--muted);
  font: inherit; font-size: 1.1rem; line-height: 1; padding: .3rem .7rem; border-radius: 999px; cursor: pointer; text-decoration: none; }
.notify-button:hover { color: var(--ink); background: var(--petal-soft); }
.notify-button .badge.unread { position: absolute; top: -.25rem; right: -.15rem; margin: 0; }
.msg-modal { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0;
  border: 0; background: var(--blush); color: var(--ink); z-index: 30; flex-direction: column; }
.msg-modal[open] { display: flex; animation: msg-grow .22s ease-out; transform-origin: top right; }
.msg-modal::backdrop { background: rgba(0, 0, 0, .35); }
@keyframes msg-grow { from { transform: scale(.06); opacity: 0; border-radius: 999px; } to { transform: scale(1); opacity: 1; } }
.msg-modal-head { display: flex; align-items: center; gap: .8rem; padding: .7rem 1.25rem; border-bottom: 1px solid var(--line);
  background: var(--glass); }
.msg-modal-head strong { font-family: var(--serif); font-size: 1.25rem; }
.msg-modal > .msg-host { flex: 1; min-height: 0; grid-template-rows: minmax(0, 1fr); }
.msg-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; padding: 1rem 1.25rem; }
.msg-col { min-width: 0; min-height: 0; overflow-y: auto; padding: 1rem 1.25rem; background: var(--glass);
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.msg-title { margin: 0 0 .5rem; font-size: 1.15rem; }
.msg-title ~ .msg-title { margin-top: 1.4rem; }
.msg-subtitle { margin: .2rem 0 .4rem; font-size: .95rem; color: var(--muted); }
.msg-bar { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.msg-col .notice { margin-bottom: .6rem; }
.messages-page { max-width: 80rem; margin: 1.5rem auto; padding: 0 1.25rem; }
.messages-page > h1 { margin-bottom: .2rem; }
.messages-page > .msg-columns { padding: 0; }
.messages-page .msg-col { overflow: visible; }
.rooms-inbox { flex: 1; min-height: 0; overflow-y: auto; }
.rooms-inbox.msg-columns { padding: .75rem .9rem; grid-template-rows: minmax(0, 1fr); }
.rooms-inbox-link { margin: .2rem 0 .4rem; }
@media (max-width: 900px) { .msg-columns { grid-template-columns: 1fr; } .msg-col { overflow: visible; } .msg-modal > .msg-host { overflow-y: auto; } }

/* ------------------------------------------------------------- remote */
.remote-term { position: relative; height: var(--page-h); background: #1b1216; overflow: hidden; z-index: 1; }
.remote-window { position: absolute; inset: 5%; display: flex; flex-direction: column; background: #fff;
  border-radius: var(--radius); box-shadow: 0 20px 60px rgba(0, 0, 0, .45); overflow: hidden; transition: inset .2s; }
.remote-window.full { inset: 0; border-radius: 0; }
.remote-title { display: flex; align-items: center; gap: .8rem; padding: .45rem .8rem; background: #2a1b22; color: #f5e9ee;
  font: 13px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.remote-dots { display: inline-flex; gap: .4rem; }
/* The window's buttons: red closes, yellow collapses, green expands (remote.js). */
.remote-dots .remote-dot { width: .8rem; height: .8rem; padding: 0; border-radius: 50% !important; background: #c25a72;
                           opacity: .85; box-shadow: none; cursor: pointer; transition: opacity .15s, transform .1s; }
.remote-dots .remote-dot:nth-child(2) { background: #e0a85a; }
.remote-dots .remote-dot:nth-child(3) { background: #6cbf8a; }
.remote-dots .remote-dot:hover { opacity: 1; transform: scale(1.15); background-color: inherit; }
.remote-dots .remote-dot:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (pointer: coarse) { .remote-dots .remote-dot { width: 1.1rem; height: 1.1rem; } }
.remote-where { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.remote-where .muted { color: #b89aa6; }
.remote-buttons { display: flex; gap: .3rem; }
.remote-buttons .tool { background: none; box-shadow: none; color: #f5e9ee; padding: .1rem .5rem; border-radius: 6px; font-size: 1rem; text-decoration: none; }
.remote-buttons .tool:hover { background: rgba(255, 255, 255, .12); }
.remote-buttons .tool[aria-pressed="true"] { background: rgba(255, 255, 255, .2); }
.remote-content { flex: 1; min-height: 0; position: relative; }
.remote-content iframe { width: 100%; height: 100%; border: 0; background: #fff; display: block; }
.remote-content iframe[hidden] { display: none; }
.remote-home { height: 100%; overflow: auto; padding: 1.4rem 1.8rem; background: var(--blush); color: var(--ink); }
.remote-home[hidden] { display: none; }
.remote-cards { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .9rem; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
.remote-card { padding: 1rem 1.2rem; display: flex; flex-direction: column; gap: .4rem; }
.remote-card p { margin: 0; }
/* margin-top auto: the grid makes every card in a row the same height, so the button sits on the
   same line in all of them whether or not the card has a description. */
.remote-card button, .remote-card .button-like { align-self: flex-start; margin-top: auto; }
.remote-bar { position: absolute; top: 0; right: 0; height: 100%; display: flex; flex-direction: column; align-items: flex-end;
  z-index: 2; pointer-events: none; }
.remote-handle { pointer-events: auto; writing-mode: vertical-rl; transform: rotate(180deg); margin: 0; padding: .9rem .35rem;
  border-radius: 0 10px 10px 0; background: #2a1b22; color: #f5e9ee; box-shadow: none; font-size: .8rem; letter-spacing: .05em; }
.remote-handle:hover { background: #3b2630; }
.remote-drop { pointer-events: auto; width: 18rem; max-height: calc(100% - 1rem); overflow: auto; margin-top: .5rem;
  background: #2a1b22; color: #f5e9ee; border-radius: 12px 0 0 12px; box-shadow: 0 12px 40px rgba(0, 0, 0, .5);
  display: flex; flex-direction: column; padding: .5rem 0; }
.remote-drop[hidden] { display: none; }
.remote-item { display: block; width: 100%; text-align: left; background: none; box-shadow: none; color: #f5e9ee;
  padding: .55rem 1rem; border-radius: 0; font-weight: normal; text-decoration: none; }
.remote-item:hover { background: rgba(255, 255, 255, .1); }
.remote-item[aria-current="page"] { color: var(--petal); font-weight: 600; box-shadow: inset 3px 0 0 var(--petal); }
.ax-new-stack { flex-direction: column; align-items: stretch; }
.remote-list-button { display: none; }
@media (max-width: 800px) {
  .remote-window { inset: 0; border-radius: 0; }
  .remote-handle { display: none; }
  .remote-list-button { display: inline-block; }
  .remote-drop { width: min(16rem, 80vw); margin-top: 0; max-height: 100%; border-radius: 0; }
  .remote-buttons .tool { padding: .3rem .6rem; font-size: 1.1rem; }
}

/* ------------------------------------------------------------- editor */
.editor { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .9rem;
  height: var(--page-h); padding: .9rem; }
.editor-pane { min-height: 0; overflow: hidden; display: flex; }
.editor-pane .CodeMirror { flex: 1; height: auto; min-height: 0; font: 14px/1.55 ui-monospace, SFMono-Regular, Menlo,
  Consolas, monospace; background: transparent; color: var(--ink); border-radius: var(--radius); }
.editor-pane .CodeMirror-gutters { background: transparent; border-right: 1px solid var(--line); }
.editor-pane .CodeMirror-linenumber { color: var(--muted); }
.editor-pane .CodeMirror-cursor { border-left: 2px solid var(--ink); }
.editor-pane .CodeMirror-selected, .editor-pane .CodeMirror-focused .CodeMirror-selected { background: var(--petal-soft); }
.editor-pane .cm-s-default .cm-header { color: var(--rose-deep); }
.editor-pane .cm-s-default .cm-link, .editor-pane .cm-s-default .cm-url { color: var(--rose); }
.editor-pane .cm-s-default .cm-quote, .editor-pane .cm-s-default .cm-comment, .editor-pane .cm-s-default .cm-hr { color: var(--muted); }
.editor-pane .cm-s-default .cm-strong { font-weight: 600; }
.editor-pane textarea { flex: 1; font: 14px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; border: 0;
  background: transparent; color: var(--ink); padding: 1rem; resize: none; outline: none; }
.editor-preview { min-height: 0; overflow: auto; padding: 1.1rem 1.4rem; }
.ed-name { font: inherit; padding: .3rem .6rem; border: 1px solid var(--line); border-radius: 8px;
  background: var(--glass-strong); color: var(--ink); min-width: 16rem; }
.ed-conflict { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin: .9rem .9rem 0;
  padding: .6rem 1rem; border: 1px solid var(--error); border-radius: 12px; background: var(--glass-strong); }
.ed-conflict[hidden] { display: none; }
@media (prefers-color-scheme: dark) { .editor-pane .CodeMirror-selected { background: rgba(240, 138, 162, .2); } }
.ed-switch { display: none; }
@media (max-width: 800px) {
  .editor { grid-template-columns: minmax(0, 1fr); }
  .ed-switch { display: flex; }
  .ed-switch .tool[aria-pressed="true"] { background: var(--petal-soft); color: var(--rose-deep); }
  body:not(.ed-preview) .editor-preview, body.ed-preview .editor-pane { display: none; }
  .ed-name { min-width: 0; flex: 1 1 8rem; }
  .editor-pane .CodeMirror, .editor-pane textarea { font-size: 16px; }
}

/* --------------------------------------------------------- help and wiki */
.wiki-new { align-items: center; justify-content: space-between; }
.wiki-lib { padding-left: .3rem; }
.wiki-pane { display: flex; flex-direction: column; }
.wiki-head { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; justify-content: space-between;
  padding-bottom: .6rem; margin-bottom: .8rem; border-bottom: 1px solid var(--line); }
.wiki-head[hidden] { display: none; }
.wiki-title { color: var(--ink); font-weight: 600; }
.wiki-actions { display: flex; gap: .8rem; align-items: center; }
.wiki-body { flex: 1; }

.help-link { text-decoration: none; color: var(--muted); padding: .3rem .8rem; border-radius: 999px; }
.help-link:hover { color: var(--ink); background: var(--petal-soft); }
.help-toc li a { display: block; padding: .32rem .5rem; border-radius: 8px; color: var(--ink); text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.help-toc li a:hover { background: var(--petal-soft); }
.help-toc li a[aria-current="page"] { background: var(--petal-soft); color: var(--rose-deep); font-weight: 600; }
@media (prefers-color-scheme: dark) {
  .help-link:hover, .help-toc li a:hover, .help-toc li a[aria-current="page"] { background: rgba(240, 138, 162, .16); }
}

/* ------------------------------------------------------- falling petals */
.parallax { display: none; }   /* the neon theme's city backdrop (theme-neon.css, parallax.js) */
.petals { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.petals span {
  position: absolute; top: -2rem; width: 14px; height: 11px;
  background: radial-gradient(circle at 30% 30%, #fde4ea, var(--petal));
  border-radius: 80% 10% 80% 10%; opacity: .75;
  animation: fall linear infinite;
}
.petals span:nth-child(1) { left: 8%;  animation-duration: 19s; animation-delay: -2s; }
.petals span:nth-child(2) { left: 23%; animation-duration: 24s; animation-delay: -11s; transform: scale(.8); }
.petals span:nth-child(3) { left: 41%; animation-duration: 21s; animation-delay: -6s; }
.petals span:nth-child(4) { left: 58%; animation-duration: 27s; animation-delay: -15s; transform: scale(.7); }
.petals span:nth-child(5) { left: 74%; animation-duration: 22s; animation-delay: -9s; }
.petals span:nth-child(6) { left: 90%; animation-duration: 25s; animation-delay: -18s; transform: scale(.85); }
.chat-layout, main { position: relative; z-index: 1; }
/* Above the page and its drawers, so the ☰ menu and file menus that hang from the bar aren't covered. */
.topbar { position: relative; z-index: 26; }
@keyframes fall {
  0%   { transform: translate3d(0, -5vh, 0) rotate(0deg); }
  50%  { transform: translate3d(6vw, 50vh, 0) rotate(200deg); }
  100% { transform: translate3d(-3vw, 108vh, 0) rotate(400deg); }
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .petals { display: none; }
  .status::before { animation: none; }
}

/* --------------------------------------------------------------- small */
.chat-phone-bar { display: none; }
@media (max-width: 1000px) {
  .topbar { flex-wrap: wrap; row-gap: .3rem; }
}
@media (max-width: 760px) {
  body { background-attachment: scroll; }
  .chat-layout, .chat-layout.tools-open { grid-template-columns: minmax(0, 1fr); padding: .5rem; gap: .5rem; }
  .chat-phone-bar { display: flex; gap: .4rem; align-items: center; }
  .chat-phone-bar .tool { padding: .35rem .7rem; }
  .history.drawer { padding: 1rem; }
  .msg.user { max-width: 92%; }
  .msg.assistant { margin-right: 0; }
  .inbox, .doc { margin: .75rem; padding: 1.1rem; }
  .ask { padding-bottom: calc(.7rem + env(safe-area-inset-bottom, 0px)); }
  .check { white-space: normal; }
  .new-lib { flex-wrap: wrap; }
  .grant-add code, .token-reveal code, #cc-command, .mcp-address { overflow-wrap: anywhere; }
  .settings-form { grid-template-columns: minmax(0, 1fr); }
  /* The main bar: brand, ✉ and ☰ on one row; the tabs and the rest in the ☰ menu. */
  .topbar.main-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: .25rem .4rem;
    padding: calc(.45rem + env(safe-area-inset-top, 0px)) .75rem .45rem; align-items: center; }
  .topbar.main-bar .brand { grid-row: 1; grid-column: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar.main-bar .nav-title { grid-row: 1; grid-column: 2; font-family: var(--serif); font-size: 1.1rem; }
  .topbar.main-bar .notify-button { grid-row: 1; grid-column: 2; }
  .topbar.main-bar .nav-menu { grid-row: 1; grid-column: 3; }
  .nav-more .tabs { flex-direction: column; gap: .1rem; padding: .3rem 0; border-bottom: 1px solid var(--line); }
  .nav-more .tabs a { padding: .45rem .6rem; border-radius: 8px; color: var(--ink); }
  .topbar.main-bar .notify-button { margin: 0; font-size: 1.2rem; padding: .3rem .55rem; }
  .nav-menu { display: inline-flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.2rem; padding: 0;
    background: none; box-shadow: none; color: var(--ink); font-size: 1.25rem; border-radius: 8px; }
  .nav-menu:hover, .nav-menu[aria-expanded="true"] { background: var(--petal-soft); color: var(--ink); }
  .nav-more { display: none; position: absolute; top: calc(100% + .2rem); right: .5rem; z-index: 30; min-width: 11rem;
    max-height: calc(100dvh - var(--chrome, 3rem) - 1rem); overflow-y: auto;
    flex-direction: column; gap: .2rem; padding: .5rem .7rem; background: var(--glass-strong);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid var(--line); border-radius: 10px;
    box-shadow: var(--shadow); }
  .nav-more.open { display: flex; }
  .nav-more form { display: block; }
  .nav-more .nav-who { margin: 0; padding: .2rem 0 .35rem; border-bottom: 1px solid var(--line); }
  .nav-more .help-link { padding: .35rem 0; }
  .nav-more button.link { padding: .35rem 0; }
  /* Document bars (the editor, a file view, an API call): the name wraps instead of pushing the bar out. */
  .topbar.doc-bar { flex-wrap: wrap; gap: .4rem .7rem; padding: .5rem .75rem; }
  .topbar.doc-bar > strong { flex: 1 1 100%; min-width: 0; overflow-wrap: anywhere; font-size: .95rem; }
  .topbar.doc-bar .brand { font-size: 1.1rem; }
  /* Panels that become drawers (picker.js drawer): from under the bar to the bottom, over a backdrop. */
  .drawer { position: fixed; top: var(--chrome); bottom: 0; left: 0; width: min(19rem, 85vw); z-index: 25; margin: 0;
    overflow-y: auto; border-radius: 0 var(--radius) var(--radius) 0; box-shadow: var(--shadow); }
  .drawer.right { left: auto; right: 0; border-radius: var(--radius) 0 0 var(--radius); }
  .drawer.open { background: var(--glass-strong); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
  .drawer:not(.open) { display: none; }
  .toast, .queue { bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); }
  .msg-modal-head { padding-top: calc(.7rem + env(safe-area-inset-top, 0px)); }
}
.drawer-backdrop { position: fixed; inset: 0; z-index: 24; background: rgba(0, 0, 0, .35); }
/* Touch screens: fields at 16px (iOS zooms into anything smaller), bigger tap targets. */
select { font: inherit; color: var(--ink); }
@media (pointer: coarse) {
  input, select, textarea, #fm-sort, .grants select, .grant-add select, .claude-key-form select { font-size: 1rem; }
  input.c-check, .c-claude input, .props-switch input { width: 1.3rem; height: 1.3rem; }
  button.tool, .crumb, .tree-label { min-height: 2.4rem; }
  .tile input.c-check { pointer-events: none; }
  .fm-list.selecting .tile input.c-check { pointer-events: auto; opacity: 1; }
  .rooms-actions .link { min-height: 2rem; }
}

/* connect claude */
.steps { padding-left: 1.3rem; line-height: 1.6; }
.token-reveal { border: 1px solid var(--line); border-radius: 10px; padding: .6rem .9rem; margin: .8rem 0; background: var(--glass-strong); }
.token-reveal code { word-break: break-all; flex: 1; }
.connect code { font-size: .85rem; }
/* Settings: two pages side by side, Erynne's and Claude's, with the same margin all round as on top. */
.settings-page { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; margin: 1.5rem;
                 align-items: start; }
.settings-page > .inbox { max-width: none; margin: 0; }
@media (max-width: 1000px) { .settings-page { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .settings-page { margin: .75rem; gap: .75rem; } }
.claude-key-form { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .5rem 0; }
.claude-key-form input[type="password"] { flex: 1 1 16rem; min-width: 0; margin: 0; }
.claude-key-form select { font: inherit; color: var(--ink); background: var(--glass-strong); border: 1px solid var(--line);
                          border-radius: 8px; padding: .3rem .4rem; }
.new-lib select { font: inherit; color: var(--ink); background: var(--glass-strong); border: 1px solid var(--line);
  border-radius: 8px; padding: .25rem .4rem; }

/* ------------------------------------------------------- access explorer */
.ax-page { display: flex; flex-direction: column; gap: .7rem; height: var(--page-h); padding: .9rem; }
.ax-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.2rem; padding: 0 .3rem; }
.ax-head h1 { margin: 0; font-size: 1.4rem; }
.ax-tabs { display: flex; flex-wrap: wrap; gap: .35rem; }
.ax-tabs button { background: none; box-shadow: none; color: var(--muted); padding: .35rem .85rem;
  border-radius: 999px; font-weight: 500; }
.ax-tabs button:hover { color: var(--ink); background: var(--petal-soft); }
.ax-tabs button[aria-selected="true"] { color: var(--rose-deep); background: var(--petal-soft); font-weight: 600; }
.ax-error { margin: 0 .3rem; }
.ax { display: grid; grid-template-columns: 18rem minmax(0, 1fr); gap: .9rem; flex: 1; min-height: 0; }
.ax[hidden], .ax-page .inbox[hidden] { display: none; }
.ax-page .inbox { width: 100%; margin: 0 auto; overflow: auto; }
/* Access → Settings: this box's settings on the left, connectors on the right, like the Settings page. */
.ax-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; flex: 1; min-height: 0;
  align-items: start; }
.ax-split[hidden] { display: none; }
/* Settings: the two columns, then Experimental full width; the panel scrolls as one, and Experimental
   sits at the bottom of the panel even when the columns are short. */
.ax-settings { display: flex; flex-direction: column; gap: .9rem; flex: 1; min-height: 0; overflow: auto; }
.ax-settings[hidden] { display: none; }
.ax-settings > .ax-split { flex: none; min-height: 0; overflow: visible; }
.ax-settings > .ax-wide { flex: none; width: 100%; max-width: none; margin: 0; }
.ax-settings > .ax-wide:last-child { margin-top: auto; }   /* Experimental stays at the bottom; Entertainment, then Themes, sit under the columns */
.ax-split > .inbox { max-width: none; max-height: none; }
.ax-split-title { margin: 0; font-size: 1.3rem; }
.ax-split .ax-split-title + .ax-h { margin-top: 1rem; }
.ax-tree { overflow: auto; padding: .6rem .3rem; }
.ax-pane { overflow: auto; padding: 1.1rem 1.4rem; }
.ax-pane h2 { margin: 0; font-size: 1.25rem; }
.ax-new { display: flex; gap: .4rem; padding: 0 .3rem .6rem; }
.ax-new input { flex: 1; min-width: 0; }
.ax-link { display: flex; gap: .4rem; align-items: center; }
.ax-link input { flex: 1; min-width: 8rem; padding: .3rem .5rem; }
.ax-share { margin-top: 1rem; padding: .8rem 1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--glass-strong); }
.ax-share p { margin: .3rem 0; }
.api-section { margin-top: 1.2rem; }
.api-field { display: block; margin: .5rem 0; }
.api-field > span { display: block; }
.api-field input, .api-field textarea, .api-field select { width: 100%; }
.api-op { border: 1px solid var(--line); border-radius: 10px; padding: .5rem .8rem; margin: .5rem 0; }
.api-op.editing { background: var(--glass-strong); }
.api-op .lib-head { gap: .6rem; flex-wrap: wrap; }
.api-test { margin-top: .6rem; border-top: 1px dashed var(--line); padding-top: .5rem; }
.api-response { max-height: 24rem; overflow: auto; font-size: .8rem; white-space: pre-wrap; }
.mono { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.ax-badge { flex: none; font-size: .75rem; color: var(--muted); padding: 0 .45rem; white-space: nowrap; }
.ax-empty { padding: .25rem .8rem .25rem 2.4rem; }
.ax-h { margin: 1.5rem 0 .15rem; font-size: 1.05rem; }
.ax-crumbs { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem; margin-bottom: .5rem; }
.ax-inherit { margin-top: 1rem; padding: .7rem .9rem; border: 1px solid var(--line); border-radius: 10px; }
.ax-inherit > p { margin: .4rem 0 0; }
.ax-confirm { display: flex; flex-direction: column; gap: .45rem; margin-top: .7rem; padding-top: .7rem;
  border-top: 1px solid var(--line); }
.ax-confirm p { margin: 0; }
.ax-confirm .check { white-space: normal; align-items: flex-start; }
.ax-inherited li { gap: .7rem; }
@media (prefers-color-scheme: dark) {
  .ax-tabs button:hover, .ax-tabs button[aria-selected="true"] { background: rgba(240, 138, 162, .16); }
}
.ax-side > summary { display: none; }
@media (max-width: 800px) {
  .ax-page { height: auto; }
  .ax, .ax-split { grid-template-columns: minmax(0, 1fr); }
  .ax-settings { overflow: visible; }
  .ax-tree { max-height: 40vh; }
  .ax-side > summary { display: block; cursor: pointer; padding: .35rem .5rem; font-weight: 600; color: var(--rose-deep); }
  .ax-side:not([open]) { overflow: hidden; }
  .ax-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: .2rem; }
  .ax-tabs::-webkit-scrollbar { display: none; }
  .ax-tabs button { white-space: nowrap; flex: none; }
  .ax-link input, .sg-field textarea { min-width: 0; }
  .sg-field { width: 100%; }
  .sg-field textarea { width: 100%; }
}
.ax-commits { list-style: none; padding: 0; margin: .4rem 0 .8rem; font-size: .9rem; }
.ax-commits li { padding: .2rem 0; border-bottom: 1px solid var(--line); }
.ax-commits code { margin-right: .4rem; }

/* file versions (info pane) */
.versions { margin-top: 1rem; border-top: 1px solid var(--line); padding-top: .6rem; }
.versions h4 { margin: 0 0 .4rem; font-size: .95rem; }
.version-list { list-style: none; padding: 0; margin: 0; font-size: .88rem; }
.version-list li { padding: .45rem 0; border-bottom: 1px solid var(--line); }
.version-actions { display: flex; gap: .8rem; margin-top: .2rem; }

/* file comments (info pane) */
.comments { margin-top: 1rem; border-top: 1px solid var(--line); padding-top: .6rem; }
.comments h4 { margin: 0 0 .4rem; font-size: .95rem; }
.comment-list { list-style: none; padding: 0; margin: 0 0 .5rem; font-size: .88rem; }
.comment-list li { padding: .45rem 0; border-bottom: 1px solid var(--line); }
.comment-list li.reply { padding-left: 1rem; }
.comment-text { white-space: pre-wrap; overflow-wrap: anywhere; margin: .15rem 0; }
.comment-form { display: flex; flex-direction: column; gap: .35rem; align-items: flex-start; }
.comment-form textarea { width: 100%; box-sizing: border-box; resize: vertical; }

/* Erynne's agent in chat (agent.js): steps, proposed file changes */
.ask-scope { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.tools-toggle { display: inline-flex; align-items: center; gap: .3rem; margin: 0; white-space: nowrap; flex: none;
                color: var(--muted); cursor: pointer; }
.tools-toggle input { width: auto; margin: 0; flex: none; }
.token-count { margin-left: auto; white-space: nowrap; }   /* right end of the row above the question box */
.steps { margin: 0 0 .4rem; }
.steps summary { cursor: pointer; }
.step-list { margin: .2rem 0 0; padding-left: 1.4rem; }
.step.running { color: var(--muted); font-style: italic; }
.step.failed { color: var(--error); }
.proposal { margin-top: .8rem; padding: .7rem .9rem; border: 1px solid var(--line); border-radius: var(--radius);
            background: var(--glass-strong); }
.proposal[data-status="applied"] { border-color: var(--ok-fg); }
.proposal[data-status="dismissed"] { opacity: .7; }
.proposal[data-status="rejected"] { opacity: .8; }
.proposal-actions input { flex: 1 1 14rem; min-width: 0; }
.proposal-head { margin-bottom: .3rem; overflow-wrap: anywhere; }
.proposal-changes { margin: .2rem 0 .4rem; padding-left: 1.2rem; }
.proposal .diff { max-height: 18rem; overflow: auto; margin: .3rem 0 .5rem; padding: .5rem; border-radius: 8px;
                  background: rgba(0, 0, 0, .04); font-size: .8rem; line-height: 1.4; white-space: pre-wrap;
                  overflow-wrap: anywhere; }
.diff .add { background: var(--ok-bg); color: var(--ok-fg); }
.diff .del { background: var(--bad-bg); color: var(--bad-fg); }
.diff .hunk { color: var(--muted); }
.proposal-actions { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; }
@media (prefers-color-scheme: dark) { .proposal .diff { background: rgba(255, 255, 255, .05); } }
.agent-settings { display: grid; grid-template-columns: max-content minmax(0, 24rem); gap: .45rem .8rem;
                  align-items: center; margin: .5rem 0; }
.agent-settings input[type="text"], .agent-settings input[type="url"], .agent-settings input[type="password"],
.agent-settings input[type="number"] { width: 100%; }
@media (max-width: 600px) { .agent-settings { grid-template-columns: minmax(0, 1fr); } }

/* Settings page: Microsoft 365 links (m365.js) */
.ok-note { color: var(--ok-fg); background: var(--ok-bg); padding: .4rem .7rem; border-radius: 8px; }

/* OAuth consent page (oauth_consent.html) */
.consent .grants { margin: .4rem 0 .8rem; }
.consent-actions { display: flex; gap: 1rem; align-items: center; margin-top: .8rem; }

/* Personal settings (settings.html) */
.settings-form { display: grid; grid-template-columns: max-content minmax(0, 18rem); justify-content: start;
                 gap: .5rem .8rem; align-items: center; }
.settings-form label { margin: 0; }
.settings-form input { padding: .35rem .5rem; }
@media (max-width: 640px) { .settings-form { grid-template-columns: 1fr; } }

/* Theme picker (settings.html) */
.theme-picker { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: .8rem; }
.theme-card { display: flex; gap: .8rem; align-items: center; margin: 0; padding: .7rem .9rem; cursor: pointer;
              border: 1px solid var(--line); border-radius: 10px; }
.theme-card:has(input:checked) { border-color: var(--rose); box-shadow: 0 0 0 1px var(--rose); }
.theme-card input { width: auto; accent-color: var(--rose); }
.theme-swatch { flex: none; position: relative; width: 4.2rem; height: 3rem; border-radius: 8px; overflow: hidden; }
.theme-swatch span { position: absolute; display: block; }
.theme-swatch.sakura { background: linear-gradient(#fbeef0, #f4d5dc); border: 1px solid rgba(194, 90, 114, .3); }
.theme-swatch.sakura span:nth-child(1) { left: 10%; top: 18%; width: 34%; height: 40%; border-radius: 50%; background: #f4b6c2; }
.theme-swatch.sakura span:nth-child(2) { right: 12%; bottom: 14%; width: 40%; height: 26%; border-radius: 999px; background: #c25a72; }
.theme-swatch.sakura span:nth-child(3) { left: 0; right: 0; bottom: 0; height: 10%; background: #8a5560; }
.theme-swatch.neon { background: #07020d; border: 1px solid #ff2e97; border-radius: 0;
                     box-shadow: -2px 0 0 rgba(0, 240, 255, .6), 2px 0 0 rgba(255, 20, 80, .7), 0 0 10px rgba(255, 46, 151, .6); }
.theme-swatch.neon span:nth-child(1) { left: 10%; top: 20%; width: 50%; height: 14%; background: #ff2e97; box-shadow: 0 0 8px #ff2e97; }
.theme-swatch.neon span:nth-child(2) { left: 10%; top: 46%; width: 32%; height: 10%; background: #00f0ff; box-shadow: 0 0 8px #00f0ff; }
.theme-swatch.neon span:nth-child(3) { left: 0; right: 0; bottom: 0; height: 28%;
  background: repeating-linear-gradient(90deg, rgba(255, 46, 151, .7) 0 1px, transparent 1px 8px),
              linear-gradient(transparent, rgba(255, 46, 151, .45)); }

/* ---------------------------------------------------------------- Rooms (rooms.html, rooms.js) */
/* Full width: the same .75rem gap on every side as at the bottom, however wide the screen. */
.rooms { display: grid; grid-template-columns: 15rem minmax(0, 1fr) auto; gap: .75rem;
         margin: .75rem; height: calc(var(--page-h) - 1.5rem); }
/* The inbox (.msg-columns), the pane and the head actions set their own display; hidden must still win,
   or the inbox stays under the room log, splitting its height. */
.rooms [hidden] { display: none !important; }
.rooms-side, .rooms-main, .rooms-pane { background: var(--glass); border: 1px solid var(--line);
                                        border-radius: var(--radius); box-shadow: var(--shadow); min-height: 0; }
.rooms-side { padding: .75rem; overflow-y: auto; }
.rooms-side-head { display: flex; justify-content: space-between; align-items: center; }
.rooms-group { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted);
               margin: 1rem 0 .3rem; }
.rooms-list { list-style: none; margin: 0; padding: 0; }
.rooms-item { display: flex; align-items: center; gap: .4rem; padding: .25rem .45rem; border-radius: 8px;
              color: var(--ink); text-decoration: none; }
.rooms-item:hover { background: var(--glass-strong); }
.rooms-item.current { background: var(--petal-soft); }
.rooms-item.unread .rooms-name { font-weight: 700; }
.rooms-item .badge { margin-left: auto; }
.rooms-item .badge.mention { background: var(--rose); color: #fff; }
.rooms-icon { width: 1.1rem; text-align: center; color: var(--muted); }
.presence { font-size: .7rem; }
.presence.online { color: #3fae5f; }
.presence.idle { color: #d9a33b; }
.presence.offline { color: var(--muted); }
.rooms-main { display: flex; flex-direction: column; overflow: hidden; }
.rooms-head { display: flex; align-items: center; gap: .6rem; padding: .6rem .9rem; border-bottom: 1px solid var(--line); }
.rooms-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rooms-head-actions { display: flex; gap: .4rem; }
.rooms-menu { display: none; }
.rooms-log { flex: 1; overflow-y: auto; padding: .5rem .9rem; }
.rooms-empty { margin: 2rem auto; text-align: center; }
.rooms-day { text-align: center; font-size: .75rem; color: var(--muted); margin: .8rem 0 .3rem;
             border-bottom: 1px solid var(--line); line-height: 0; }
.rooms-msg { position: relative; padding: .3rem .4rem; border-radius: 8px; margin-top: .4rem; }
.rooms-msg.compact { margin-top: 0; padding-top: .05rem; }
.rooms-msg:hover { background: var(--glass-strong); }
.rooms-msg.mentions-me { border-left: 3px solid var(--rose); background: var(--petal-soft); }
.rooms-msg.deleted .rooms-body { color: var(--muted); font-style: italic; }
.rooms-msg-head strong.erynne::before { content: "🌸 "; }
.rooms-body { overflow-wrap: anywhere; }
.rooms-body p { margin: .1rem 0; }
.rooms-body pre { overflow-x: auto; }
.rooms-actions { position: absolute; top: -.6rem; right: .5rem; display: none; gap: .1rem; background: var(--glass-strong);
                 border: 1px solid var(--line); border-radius: 8px; padding: 0 .2rem; }
.rooms-msg:hover > .rooms-actions, .rooms-msg:focus-within > .rooms-actions { display: flex; }
.rooms-picker { display: flex; gap: .1rem; }
.rooms-reactions { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .2rem; }
.rooms-chip { border: 1px solid var(--line); border-radius: 999px; padding: 0 .5rem; background: var(--glass-strong);
              color: var(--ink); font-size: .85rem; }
.rooms-chip.mine { border-color: var(--rose); }
.rooms-files { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .3rem; }
.rooms-files img { max-width: 18rem; max-height: 14rem; border-radius: 8px; border: 1px solid var(--line); }
.rooms-typing { min-height: 1.2rem; padding: 0 .9rem; }
.rooms-compose { padding: .5rem .75rem .75rem; position: relative; }
.rooms-compose-row { display: flex; gap: .5rem; align-items: flex-end; }
.rooms-compose textarea { flex: 1; resize: none; min-height: 2.4rem; max-height: 200px; }
.rooms-attach { cursor: pointer; font-size: 1.2rem; padding-bottom: .3rem; }
.rooms-attached { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .3rem; }
.rooms-suggest { position: absolute; bottom: 100%; left: 3rem; background: var(--glass-strong); border: 1px solid var(--line);
                 border-radius: 8px; padding: .3rem; display: flex; flex-direction: column; z-index: 5; }
.rooms-pane { width: 22rem; display: flex; flex-direction: column; overflow: hidden; }
.rooms-pane-head { display: flex; justify-content: space-between; padding: .6rem .9rem; border-bottom: 1px solid var(--line); }
.rooms-pane-body { flex: 1; overflow-y: auto; padding: .5rem .9rem; }
.rooms-members { list-style: none; padding: 0; }
.rooms-members li { display: flex; gap: .4rem; align-items: center; padding: .15rem 0; }
.rooms-members li button { margin-left: auto; }
.rooms-dialog { max-width: 34rem; width: calc(100% - 2rem); border: 1px solid var(--line); border-radius: var(--radius);
                background: var(--glass-strong); color: var(--ink); }
.rooms-form { display: flex; flex-direction: column; gap: .4rem; margin-bottom: .8rem; }
.rooms-browse-row { display: flex; align-items: center; gap: .5rem; padding: .3rem 0; border-bottom: 1px solid var(--line); }
.rooms-browse-row button { margin-left: auto; }
@media (max-width: 900px) {
  .rooms { grid-template-columns: minmax(0, 1fr); }
  .rooms-menu { display: inline; }
  .rooms-side { position: fixed; top: calc(var(--chrome) + .75rem); bottom: .75rem; left: .75rem; width: min(17rem, 85vw);
                z-index: 25; display: none; }
  .rooms-side.open { display: block; }
  .rooms-pane { position: fixed; top: calc(var(--chrome) + .75rem); bottom: .75rem; right: .75rem; width: min(22rem, calc(100% - 1.5rem));
                z-index: 25; }
  .rooms-suggest { left: 0; right: 0; }
}
/* On touch screens a tap on a message shows its actions (a mouse hovers). */
.rooms-msg.show-actions > .rooms-actions { display: flex; }
.rooms-preview { display: block; margin-top: .3rem; padding: .35rem .6rem; border: 1px solid var(--line);
                 border-left: 3px solid var(--rose); border-radius: 8px; background: var(--glass-strong);
                 text-decoration: none; color: var(--ink); max-width: 32rem; }

/* Access → Signage (admin_signage.js): the content browser on the left, playlists, schedule, screens on the right. */
.sg-section { margin-bottom: 1.6rem; }
.sg-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .6rem 1rem; margin: .5rem 0; }
.sg-field { display: flex; flex-direction: column; gap: .2rem; }
.sg-field input[type="checkbox"] { align-self: flex-start; margin: .35rem 0; }
.sg-field textarea { min-width: 18rem; }
.sg-field input[type="range"] { width: 10rem; padding: 0; }
.sg-tools { display: flex; gap: .4rem; flex: none; flex-wrap: wrap; align-items: center; }
.grants .sg-show, .grants .sg-slide { display: block; }
.sg-list li { align-items: flex-start; }
.sg-editor { margin: .6rem 0 1rem; }
.sg-slides { list-style: none; padding: .3rem; margin: .5rem 0; display: flex; flex-direction: column; gap: .6rem; border-radius: 10px; }
.sg-slides.drop-here { outline: 2px dashed var(--rose); background: var(--petal-soft); }
.sg-slide, .sg-screen { padding: .7rem .9rem; border-radius: .7rem; }
.sg-slide.sg-off { opacity: .6; }
.sg-slide.sg-dragging { opacity: .5; outline: 2px dashed var(--rose); }
.sg-slide-head { display: flex; align-items: center; gap: .7rem; }
.sg-slide-label { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sg-slide-label span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg-grip { cursor: grab; color: var(--muted); font-size: 1.2rem; padding: .2rem; touch-action: none; user-select: none; }
.sg-slide-thumb { flex: none; width: 4.2rem; height: 2.6rem; border-radius: 6px; overflow: hidden; display: grid; place-items: center;
                  background: var(--petal-soft); }
.sg-slide-thumb img { width: 100%; height: 100%; object-fit: cover; }
.sg-slide-thumb .ico.big { font-size: 1.6rem; }
.sg-timing > summary { cursor: pointer; }
.sg-screen { margin: .8rem 0; }
.sg-screen-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .8rem; flex-wrap: wrap; }
.sg-screen-title { display: flex; flex-direction: column; gap: .1rem; }
.sg-screen-title .presence { margin-right: .3rem; }
.sg-group { margin: 1rem 0; }
.sg-days { display: flex; flex-wrap: wrap; gap: .1rem .6rem; }
.sg-effects { display: flex; flex-direction: column; align-items: flex-start; gap: .3rem; }
.sg-fine > summary { cursor: pointer; }
.sg-actions { margin-top: .8rem; }
.sg-empty { padding: .8rem; }
/* The browser (left): tools, the tree, the thumbnails of the chosen folder, uploads. */
.sg-side { display: flex; flex-direction: column; min-height: 0; }
.sg-browser-tools { display: flex; flex-wrap: wrap; gap: .3rem .6rem; align-items: center; padding: 0 .3rem .5rem; }
.sg-side .tree { flex: none; max-height: 40%; overflow: auto; }
.sg-files { flex: 1; min-height: 8rem; overflow: auto; padding: .4rem .3rem; border-top: 1px solid var(--line); margin-top: .4rem; }
.sg-files.grid { grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); gap: .4rem; }
.sg-hint { grid-column: 1 / -1; margin: .5rem; }
.sg-tile { padding: .4rem .3rem; gap: .25rem; }
.sg-tile .nm { font-size: .8rem; }
.sg-tile.sg-noplay { opacity: .55; }
.sg-tile input.c-check { opacity: 1; }
.sg-thumb { position: relative; width: 100%; aspect-ratio: 16 / 10; border-radius: 6px; overflow: hidden; display: grid;
            place-items: center; background: var(--petal-soft); }
.sg-thumb img { width: 100%; height: 100%; object-fit: cover; }
.sg-badge { position: absolute; right: .25rem; bottom: .25rem; font-size: .68rem; font-weight: 600; padding: .05rem .35rem;
            border-radius: 4px; background: rgba(0, 0, 0, .65); color: #fff; }
.sg-queue { list-style: none; margin: .4rem 0 0; padding: .3rem; border-top: 1px solid var(--line); font-size: .85rem; }
.sg-queue[hidden] { display: none; }
.sg-pane { display: flex; flex-direction: column; }
.sg-tabs { margin-bottom: .6rem; }
/* The schedule: a week, seven columns of a day each, entries as blocks at their hours. */
.sg-week { display: grid; grid-template-columns: 2.2rem repeat(7, minmax(0, 1fr)); grid-template-rows: auto 30rem; gap: 0 2px;
           margin: .6rem 0; }
.sg-week-corner, .sg-week-day { font-size: .78rem; font-weight: 600; text-transform: uppercase; color: var(--muted); text-align: center;
                                padding-bottom: .3rem; }
.sg-week-hours { position: relative; font-size: .7rem; color: var(--muted); }
.sg-week-hours span { position: absolute; right: .3rem; transform: translateY(-50%); }
.sg-week-col { position: relative; background: var(--petal-soft); border-radius: 6px; overflow: hidden;
               background-image: repeating-linear-gradient(0deg, transparent 0 calc(12.5% - 1px), var(--line) calc(12.5% - 1px) 12.5%); }
.sg-block { position: absolute; left: 2px; right: 2px; padding: .15rem .3rem; border: 0; border-radius: 4px; font: inherit; font-size: .72rem;
            line-height: 1.2; text-align: left; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer;
            box-shadow: none; opacity: .95; }
.sg-block:hover { opacity: 1; outline: 2px solid var(--ink); }
.sg-block.sg-inherited { opacity: .5; }
.sg-block.sg-off { text-decoration: line-through; opacity: .35; }
.sg-block.sg-always { background-image: repeating-linear-gradient(135deg, transparent 0 6px, rgba(255, 255, 255, .18) 6px 10px); }
.sg-c0 { background-color: #c25a72; } .sg-c1 { background-color: #4f6fb5; } .sg-c2 { background-color: #2f8f6a; }
.sg-c3 { background-color: #b5753a; } .sg-c4 { background-color: #7a5ab5; } .sg-c5 { background-color: #b54f8a; }
.sg-c6 { background-color: #3a8fb5; } .sg-c7 { background-color: #8a8a2f; }
/* The preview: the TV's renderer in a 16:9 box. */
.sg-preview { width: min(64rem, calc(100vw - 2rem)); }
.sg-preview-box { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: 8px; overflow: hidden; }
.sg-preview-box .mc-sg-text h1 { font-size: 2.2rem; }
.sg-preview-box .mc-sg-text p, .sg-preview-box .mc-sg-html { font-size: 1.1rem; max-width: 90%; }
.sg-preview-box .mc-sg-text { gap: .8rem; padding: 1.5rem 2rem; }
@media (max-width: 800px) {
  .sg-side .tree { max-height: 10rem; }
  .sg-week { grid-template-rows: auto 22rem; }
}

/* Automator (automations.js): the list on the left, the chosen automation on the right. */
.inbox.automator { max-width: 76rem; }
.automator-grid { display: grid; grid-template-columns: minmax(16rem, 22rem) minmax(0, 1fr); gap: 1rem; align-items: start; }
.automator-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.automator-card { padding: .7rem .9rem; border-radius: 12px; }
.automator-card.active { outline: 2px solid var(--petal, currentColor); }
.automator-card p { margin: .3rem 0; }
.automator-detail { padding: 1rem 1.25rem; border-radius: 14px; }
.automator-days { display: flex; flex-wrap: wrap; gap: .25rem .8rem; }
.automator-tools { margin: .6rem 0; }
.automator-tool-group { display: flex; flex-wrap: wrap; gap: .25rem .9rem; margin: .2rem 0 .5rem; }
.automator-deliver { border: 1px solid var(--line, rgba(127, 127, 127, .3)); border-radius: 10px; margin: .6rem 0; }
.automator-deliver .check { display: flex; margin: .2rem 0; }
.automator-runs { list-style: none; padding: 0; margin: .3rem 0; max-height: 12rem; overflow: auto; }
.automator-answer { margin-top: .5rem; overflow-wrap: anywhere; }
@media (max-width: 800px) {
  .automator-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------- Themes (admin_theme.js, Settings → Themes) */
/* A Preferences card drawn from a theme's own colours (preferences.html sets the --sw-* variables). */
.theme-swatch.look { background: var(--sw-page, #888); border: 1px solid var(--sw-primary, #444); }
.theme-swatch.look span:nth-child(1) { left: 8%; top: 14%; width: 50%; height: 16%; border-radius: 3px; background: var(--sw-text, #fff); opacity: .9; }
.theme-swatch.look span:nth-child(2) { left: 8%; top: 40%; width: 84%; height: 44%; border-radius: 4px; background: var(--sw-surface, rgba(255,255,255,.5)); border: 1px solid var(--sw-highlight, transparent); }
.theme-swatch.look span:nth-child(3) { right: 14%; bottom: 20%; width: 30%; height: 16%; border-radius: 999px; background: var(--sw-primary, #444); }

.th-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: .8rem; margin: .6rem 0 1rem; }
.th-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .4rem .8rem; padding: .7rem .9rem; border: 1px solid var(--line);
           border-radius: 10px; background: var(--glass-strong); }
.th-card.current { box-shadow: 0 0 0 1px var(--rose); border-color: var(--rose); }
.th-card .theme-swatch { grid-row: span 3; }
.th-card-name { font-weight: 600; }
.th-card-name .badge { margin-left: .3rem; }
.th-switches { display: flex; flex-wrap: wrap; gap: .3rem .9rem; }
.th-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .3rem .5rem; }
.th-new { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-bottom: .6rem; }
.th-rows { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .5rem .8rem; align-items: center; margin: .5rem 0 1rem; }
.th-rows > span:first-child, .th-rows > label.small { font-weight: 600; }
.th-assets { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: .8rem; margin: .4rem 0 .8rem; }
.th-asset { border: 1px dashed var(--line); border-radius: 8px; padding: .6rem; display: grid; gap: .4rem; }
.th-asset-preview { height: 4rem; display: grid; place-items: center; background: repeating-conic-gradient(rgba(127,127,127,.18) 0 25%, transparent 0 50%) 0 0 / 16px 16px; border-radius: 6px; overflow: hidden; }
.th-asset-preview img { max-height: 100%; max-width: 100%; object-fit: contain; }
.th-asset-preview .muted { font-size: .85rem; }
.th-asset-actions { display: flex; gap: .4rem; flex-wrap: wrap; }

.th-editor { display: grid; gap: .9rem; }
.th-head { display: flex; flex-wrap: wrap; gap: .5rem .8rem; align-items: center; position: sticky; top: 0; z-index: 2;
           padding: .5rem 0; background: var(--glass-strong); border-bottom: 1px solid var(--line); }
.th-head input[type="text"] { min-width: 12rem; }
.th-head .push-right { margin-left: auto; }
.th-section > h3 { margin: 0 0 .4rem; font-size: 1.05rem; }
.th-section > .muted.small { margin: 0 0 .5rem; }
.th-palettes { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1rem; }
.th-palette h4 { margin: 0 0 .4rem; }
.th-token { display: grid; grid-template-columns: 8.5rem 2.2rem minmax(0, 1fr); gap: .4rem; align-items: center; padding: .15rem 0; }
.th-token.alpha { grid-template-columns: 8.5rem 2.2rem minmax(0, 1fr) 5rem; }
.th-token input[type="color"] { width: 2.2rem; height: 1.7rem; padding: 0 2px; border: 1px solid var(--line); border-radius: 4px; background: none; }
.th-token input[type="text"] { font-family: var(--mono, ui-monospace, monospace); font-size: .85rem; padding: .2rem .4rem; }
.th-token input[type="range"] { width: 100%; }
.th-gradients { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1rem; }
.th-gradient { border: 1px solid var(--line); border-radius: 8px; padding: .6rem; display: grid; gap: .4rem; }
.th-gradient-swatch { height: 2.2rem; border-radius: 6px; border: 1px solid var(--line); }
.th-gradient-row { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.th-stop { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr) 4rem auto; gap: .4rem; align-items: center; }
.th-stop input[type="color"] { width: 2.2rem; height: 1.7rem; padding: 0 2px; border: 1px solid var(--line); border-radius: 4px; background: none; }
.th-shape { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .6rem 1rem; align-items: start; }
.th-shape label.sg-field, .th-effects label.sg-field { display: grid; gap: .2rem; }
.th-effects { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; align-items: center; }
.th-css { width: 100%; min-height: 8rem; font-family: var(--mono, ui-monospace, monospace); font-size: .85rem; }
.th-note { font-size: .85rem; }
@media (max-width: 760px) {
  .th-token, .th-token.alpha { grid-template-columns: 6.5rem 2.2rem minmax(0, 1fr); }
  .th-token.alpha input[type="range"] { grid-column: 1 / -1; }
  .th-head { position: static; }
}
.th-card .badge { background: var(--petal-soft); color: var(--rose-deep); margin-left: .3rem; vertical-align: middle; }
@media (max-width: 760px) {
  .th-card .th-switches { flex-direction: column; align-items: flex-start; gap: .2rem; }
}