/* 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;
}

@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; }
.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: calc(100vh - 3.6rem); }
.history { padding: 1rem; overflow-y: auto; }
.history #new-chat { width: 100%; }
.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: calc(100vh - 3.6rem); 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: auto; border: 1px solid var(--line); border-radius: 10px; padding: .3rem; }

/* 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); } }

@media (max-width: 1100px) {
  .fm { grid-template-columns: 13rem minmax(0, 1fr); }
  .fm-info { position: fixed; right: .9rem; top: 4.4rem; bottom: .9rem; z-index: 15; box-shadow: var(--shadow); }
}
@media (max-width: 760px) {
  .fm { grid-template-columns: 1fr; height: auto; padding: .5rem; }
  .fm-side { max-height: 30vh; }
  .fm-main { min-height: 70vh; }
  .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; }
  .fm-info { left: .5rem; right: .5rem; width: auto; }
}

/* ---------------------------------------------------- rendered Markdown */
.doc { max-width: 50rem; margin: 1.5rem auto; padding: 1.5rem 2.25rem; background: var(--glass-strong); }
.doc pre { overflow-x: auto; background: var(--petal-soft); padding: .8rem 1rem; border-radius: 10px; }
@media (prefers-color-scheme: dark) { .doc pre { background: rgba(240, 138, 162, .1); } }
.doc table { border-collapse: collapse; }
.doc th, .doc td { border: 1px solid var(--line); padding: .35rem .7rem; }
.doc :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 { background: rgba(240, 138, 162, .18); box-shadow: none; } }

/* ------------------------------------------------------- falling petals */
.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); }
.topbar, .chat-layout, main { position: relative; z-index: 1; }
@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 */
@media (max-width: 760px) {
  .chat-layout { grid-template-columns: 1fr; padding: .5rem; }
  .history { display: none; }
  .msg.user { max-width: 92%; }
  .msg.assistant { margin-right: 0; }
  .inbox, .doc { margin: .75rem; padding: 1.1rem; }
  .topbar { gap: .6rem; flex-wrap: wrap; }
}

/* 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; }
.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: calc(100vh - 3.6rem); 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; }
.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); }
}
@media (max-width: 800px) {
  .ax-page { height: auto; }
  .ax { grid-template-columns: 1fr; }
  .ax-tree { max-height: 40vh; }
}
.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; }

/* 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; color: var(--muted); cursor: pointer; }
.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-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); } }

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