/* PACOBOT – Glas-Design 2 („Glassy Dashboard“, sachlich). Wird als LETZTE Datei geladen.
   Hintergrundfoto (bg.js) hinter dunkel getöntem, mattem Glas. Nur Aussehen und Anordnung. */

/* ======================= Grundwerte ======================= */
:root {
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", Inter, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  --glass: rgba(24, 28, 37, 0.50);
  --glass-strong: rgba(24, 28, 37, 0.72);
  --glass-solid: rgba(26, 30, 40, 0.92);
  --glass-hover: rgba(36, 41, 52, 0.56);
  --blur: blur(28px) saturate(150%);
  --line: rgba(255, 255, 255, 0.12);
  --line-2: rgba(255, 255, 255, 0.20);
  --divider: rgba(255, 255, 255, 0.08);
  --fill: rgba(255, 255, 255, 0.06);
  --fill-2: rgba(255, 255, 255, 0.10);
  --fill-3: rgba(255, 255, 255, 0.16);
  --field: rgba(0, 0, 0, 0.22);

  --t1: rgba(255, 255, 255, 0.94);
  --t2: rgba(255, 255, 255, 0.66);
  --t3: rgba(255, 255, 255, 0.46);

  --blue: #3b82f6;
  --blue-rgb: 59, 130, 246;
  --blue-text: #93b8fb;
  --green: #4ade80;
  --green-bg: rgba(74, 222, 128, 0.14);
  --amber: #fbbf24;
  --amber-bg: rgba(251, 191, 36, 0.14);
  --red: #f87171;
  --red-bg: rgba(248, 113, 113, 0.14);

  --r-xl: 24px; --r-lg: 20px; --r: 14px; --r-sm: 10px;
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 40px;
  --shadow: 0 8px 32px rgba(0, 0, 0, 0.22);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dock-w: 64px;

  /* alte Variablen der bisherigen Dateien auf die neuen Werte umbiegen */
  --text: var(--t1); --muted: var(--t2); --glass-old: var(--fill);
  --accent: var(--blue); --accent-2: var(--blue); --danger: var(--red); --ok: var(--green); --warn: var(--amber);
  --hud: var(--line); --hud-dim: var(--divider); --hud-faint: transparent;
  --panel-bg: var(--glass); --panel-border: var(--line); --row-hover: var(--fill);
  --g-accent-rgb: 59, 130, 246;
  --st-idee: rgba(255, 255, 255, 0.62); --st-entwurf: #93b8fb; --st-video_fertig: #c4b5fd;
  --st-bereit: #fcd34d; --st-gepostet: #86efac; --st-verworfen: #fca5a5; --st-geloescht: rgba(255, 255, 255, 0.4);
  color-scheme: dark;
}

/* ======================= Hintergrund ======================= */
html { background: #1b2230; }
body.glas, body.login.glas {
  background: #1b2230 !important; color: var(--t1); font-family: var(--font); font-size: 14px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
.bg {
  position: fixed; inset: -24px; z-index: 0; pointer-events: none;
  background: #1b2230 var(--bg-img, none) center / cover no-repeat;
  filter: blur(6px) brightness(0.70) saturate(0.95);
  transform: translateZ(0);
}
.bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 14, 22, 0.18), rgba(10, 14, 22, 0.40)); }
.stardust, .hud-frame { display: none !important; }
button, input, textarea, select { font-family: var(--font); }
b, strong { font-weight: 600; }
::selection { background: rgba(var(--blue-rgb), 0.4); }
:focus-visible { outline: 2px solid rgba(var(--blue-rgb), 0.9); outline-offset: 2px; }
[data-ico] { display: inline-grid; place-items: center; flex: 0 0 auto; }
[data-ico] svg, .nav-ico svg { width: 18px; height: 18px; }

/* Gesperrte Großbuchstaben, Mono-Schrift und Leuchten der alten Ebenen überall zurücksetzen */
body.glas :is(.brand, .ghost, .newchat, .side-label, .chat-group, .view-head h2, .view-head .count, .panel-title,
  .add-form label, .edit-form label, .btn-primary, .btn-ghost, .btn-danger, .list-sep, .row-when, .tag, .up-when,
  .sysstat, .sys-top, .sys-top b, .sys-cell span, .sys-cell b, .status, .msg.notice, .hint, .bot-tag, .bot-card h3,
  .bot-cta, .back-link, .tab, .tab-count, .pl-chat-select, .st-chip, .post-pillar, .pl-filter label, .week-label,
  .wk-wd, .wk-date, .wk-empty, .wk-time, .wk-status, .pf, .pillar-sum, .drawer-title, .pkg-when, .copy-head,
  .posted-note, .st-date, .st-status, .st-badge, .st-card-head h3, .st-music, .st-meta, .st-tags, .st-toolbar label,
  .st-idea h4, .st-type, .st-tpl, .st-idea-date, .st-idea-status, .st-wish, .st-storage-head, .st-storage-head b,
  .st-trend b, .ml-sub, .ml-head, .ml-progress .sys-top, .mobilebar-title, .ml-who small, .ml-num, .ml-date,
  .ml-top-row .ml-addr, .ml-top-row b, .ml-top-row .ml-unread, .st-del.compact .btn-danger, .st-del.compact .btn-ghost,
  .pl-chat-bar .btn-ghost, .login-card h1, .login-card .sub, .login-card label, .login-card button) {
  font-family: var(--font); letter-spacing: normal; text-transform: none; text-shadow: none;
}
body.glas :is(.row-when, .up-when, .sys-top b, .sys-cell b, .ml-num, .ml-date, .wk-time, .wk-date, .pkg-when,
  .st-date, .tab-count, .ml-top-row b, .st-storage-head b, .kpi-value, .bar-val, .tl-time, .card-meta) { font-variant-numeric: tabular-nums; }
body.glas :is(code, .bubble code, .bubble pre, .ml-copyrow code, .st-cat-row code, .ml-setup textarea) { font-family: var(--mono); }
body.glas :is(.panel, .login-card form)::before, body.glas :is(.panel, .login-card form)::after,
body.glas .msg .bubble::before, body.glas .composer-inner::before, body.glas .composer-inner::after,
body.glas .status::before, body.glas .status::after, body.glas .login-card .sub::before, body.glas .login-card .sub::after,
body.glas .brand-dot::after { content: none !important; display: none !important; }

/* ======================= Gerüst ======================= */
body.app.pb.glas { display: block; height: var(--app-h); overflow: hidden; }
body.glas .shell { position: relative; z-index: 1; display: block; height: var(--app-h); padding-left: calc(var(--dock-w) + var(--s3) + var(--s2)); }
body.glas .main { height: var(--app-h); display: flex; flex-direction: column; min-width: 0; }
body.glas .rail, body.glas .mobilebar, body.glas .hud-readout { display: none !important; }

/* ---------- Symbolleiste (Pille) ---------- */
.dock {
  position: fixed; z-index: 30; left: var(--s3); top: 50%; transform: translateY(-50%);
  width: var(--dock-w); display: flex; flex-direction: column; align-items: center; gap: var(--s1);
  padding: 12px 0; border-radius: 999px;
  background: var(--glass); border: 1px solid var(--line); box-shadow: var(--shadow);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
}
.dock-brand {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 4px;
  font-weight: 600; font-size: 16px; color: #fff; background: var(--blue);
}
.dock-sep { width: 24px; height: 1px; background: var(--divider); margin: 4px 0; }
.dock .nav-item {
  position: relative; width: 44px; height: 44px; padding: 0; justify-content: center; gap: 0; border-radius: 50%;
  border: 0; background: transparent; color: var(--t2); transition: background 0.16s var(--ease), color 0.16s var(--ease);
}
.dock .nav-item:hover { background: var(--fill-2); color: var(--t1); }
.dock .nav-item.active { background: var(--fill-3); color: #fff; border: 0; }
.dock .nav-item.active .nav-ico { color: #fff; filter: none; }
.dock .nav-ico { width: 20px; height: 20px; color: inherit; }
.dock .nav-ico svg { width: 20px; height: 20px; }
.dock .nav-label {               /* Tooltip */
  position: absolute; left: calc(100% + 14px); top: 50%; transform: translate(-4px, -50%); white-space: nowrap;
  padding: 6px 10px; border-radius: 8px; font-size: 13px; color: var(--t1); pointer-events: none; opacity: 0;
  background: var(--glass-solid); border: 1px solid var(--line); box-shadow: var(--shadow);
  transition: opacity 0.14s var(--ease), transform 0.14s var(--ease);
}
.dock .nav-item:hover .nav-label, .dock .nav-item:focus-visible .nav-label { opacity: 1; transform: translate(0, -50%); }
.dock .dock-more { display: none; }

/* ---------- Kopfzeile ---------- */
.topbar {
  flex: 0 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--s2);
  padding: calc(var(--s3) + env(safe-area-inset-top, 0px)) var(--s3) var(--s2) 0;
}
.tb-title { min-width: 0; }
body.glas .mobilebar-title { display: block; font-size: 15px; font-weight: 600; color: var(--t1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-tabs {
  display: flex; gap: 4px; padding: 4px; border-radius: 999px; max-width: 100%; overflow-x: auto; scrollbar-width: none;
  background: var(--glass); border: 1px solid var(--line); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
}
.tb-tabs::-webkit-scrollbar { display: none; }
.tb-tabs:empty { visibility: hidden; }
.tb-tab {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 16px; border-radius: 999px; border: 0;
  background: transparent; color: var(--t2); font-size: 14px; cursor: pointer; white-space: nowrap;
  transition: background 0.16s var(--ease), color 0.16s var(--ease);
}
.tb-tab:hover { color: var(--t1); background: var(--fill); }
.tb-tab.active { color: #fff; background: var(--fill-3); font-weight: 600; }
.tb-tab .tab-count { margin: 0; padding: 1px 7px; border-radius: 999px; font-size: 11px; background: var(--fill-2); color: var(--t2); font-weight: 400; }
.tb-actions { display: flex; justify-content: flex-end; gap: var(--s1); }
.round-btn {
  position: relative; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  color: var(--t1); background: var(--glass); border: 1px solid var(--line);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); transition: background 0.16s var(--ease);
}
.round-btn:hover { background: var(--glass-hover); }
.round-btn.profile { font-size: 15px; font-weight: 600; color: #fff; background: linear-gradient(160deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.10)); }
.round-btn.static { cursor: default; flex: 0 0 auto; }
.round-btn .badge { position: absolute; top: 8px; right: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 2px rgba(24, 28, 37, 0.9); }

/* ---------- Ansichten ---------- */
body.glas .view { flex: 1 1 auto; min-height: 0; }
body.glas .view-list { overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.2) transparent; }
body.glas .view-inner { max-width: 1040px; margin: 0 auto 0 0; padding: var(--s1) var(--s3) var(--s5) 0; gap: var(--s3); }
body.glas .view-inner.wide { max-width: 1200px; }
body.glas .view-inner.xwide { max-width: 1320px; }
body.glas .view-head h2 { margin: 0; font-size: 28px; line-height: 1.2; font-weight: 600; letter-spacing: -0.01em; color: var(--t1); gap: 12px; flex-wrap: wrap; }
body.glas .view-head .count { font-size: 14px; font-weight: 400; color: var(--t3); }
body.glas .view-head p { margin: var(--s1) 0 0; color: var(--t2); font-size: 14px; max-width: 72ch; }
body.glas .back-link { display: inline-flex; align-items: center; min-height: 32px; padding: 0 0 4px; font-size: 13px; color: var(--t2); }
body.glas .back-link:hover { color: var(--t1); }
/* Reiter der Bereiche stehen jetzt oben in der Kopfzeile (shell.js spiegelt sie) */
body.glas .view .tabs { border: 0; padding: 0; margin: 0; gap: 0; justify-content: flex-end; min-height: 0; }
body.glas .view .tabs > .tab { display: none; }
body.glas .view .tabs:not(:has(.tab-action)) { display: none; }

/* ======================= Glaskarten ======================= */
body.glas :is(.card, .panel, .bot-card, .st-idea, .list:has(.row), .kpi) {
  position: relative; border-radius: var(--r-lg); padding: var(--s3);
  background: var(--glass); border: 1px solid var(--line); box-shadow: var(--shadow);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
}
.card-head { display: flex; align-items: center; gap: var(--s1); margin-bottom: var(--s2); min-height: 24px; }
.card-head h3, body.glas .panel-title { margin: 0; font-size: 15px; font-weight: 600; color: var(--t1); letter-spacing: 0; gap: var(--s1); }
body.glas .panel-title { margin-bottom: var(--s2); }
body.glas h4.panel-title { font-size: 14px; }
.card-meta { display: block; font-size: 12px; color: var(--t3); }
.card-head .card-meta { margin-left: auto; }
.card-text { margin: 0 0 var(--s2); color: var(--t2); }
body.glas .st-hint { color: var(--t2); font-size: 13px; }
body.glas .live-dot { width: 6px; height: 6px; background: var(--green); box-shadow: none; animation: none; margin-left: auto; }

/* ======================= Übersicht ======================= */
.ov-head h2 { margin: 0; font-size: 32px; line-height: 1.15; font-weight: 600; letter-spacing: -0.015em; }
.ov-head p { margin: var(--s1) 0 0; font-size: 15px; color: var(--t2); }
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s2); }
body.glas .kpi { display: flex; flex-direction: column; gap: var(--s1); padding: var(--s3) var(--s3) var(--s2); min-height: 168px; cursor: pointer;
  transition: transform 0.18s var(--ease), background 0.18s var(--ease); text-align: left; color: inherit; font: inherit; }
body.glas .kpi:hover { transform: translateY(-2px); background: var(--glass-hover); }
.kpi-top { display: flex; align-items: center; gap: var(--s1); color: var(--t2); font-size: 13px; }
.kpi-top [data-ico], .kpi-ico { width: 28px; height: 28px; border-radius: 8px; background: var(--fill-2); color: var(--t1); display: grid; place-items: center; }
.kpi-ico svg { width: 16px; height: 16px; }
.kpi-row { display: flex; align-items: baseline; gap: var(--s1); margin-top: 4px; }
.kpi-value { font-size: 32px; line-height: 1.1; font-weight: 600; letter-spacing: -0.02em; color: var(--t1); }
.kpi-unit { font-size: 15px; color: var(--t2); }
.pill { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 999px; font-size: 11.5px; font-weight: 600; white-space: nowrap;
  background: var(--fill-2); color: var(--t2); font-variant-numeric: tabular-nums; }
.pill.up { background: var(--green-bg); color: var(--green); }
.pill.down { background: var(--red-bg); color: var(--red); }
.pill.warn { background: var(--amber-bg); color: var(--amber); }
.kpi-row .pill { margin-left: auto; align-self: center; }
.kpi-sub { font-size: 12.5px; color: var(--t3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spark-svg { display: block; width: 100%; height: 36px; margin-top: auto; overflow: visible; }
.spark-svg .ln { fill: none; stroke: rgba(255, 255, 255, 0.70); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.spark-svg .ar { fill: rgba(255, 255, 255, 0.07); }
.spark-svg .dot { fill: #fff; }

.ov-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s2); }
.ov-week { grid-column: span 8; }
.ov-today { grid-column: span 4; grid-row: span 2; }
.ov-activity { grid-column: span 4; }
.ov-system { grid-column: span 4; }
.ov-action { grid-column: span 4; display: flex; flex-direction: column; }
.ov-action .btn-primary { width: 100%; }
.ov-action .btn-ghost { width: 100%; margin-top: var(--s1); }
.ov-grid > .ov-activity, .ov-grid > .ov-system { min-height: 0; }

.weekbars { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--s2); align-items: end; height: 220px; }
.wb { display: flex; flex-direction: column; align-items: center; gap: var(--s1); height: 100%; justify-content: flex-end; cursor: pointer; background: none; border: 0; padding: 0; color: inherit; font: inherit; }
.wb-bar { position: relative; width: 100%; max-width: 56px; border-radius: 12px; background: rgba(255, 255, 255, 0.14); min-height: 6px; transition: background 0.16s var(--ease); }
.wb:hover .wb-bar { background: rgba(255, 255, 255, 0.22); }
.wb.today .wb-bar { background: var(--blue); }
.wb-bar i { position: absolute; left: 0; right: 0; bottom: 0; border-radius: 12px; background: rgba(255, 255, 255, 0.18); } /* gepostet */
.wb.today .wb-bar i { background: rgba(255, 255, 255, 0.22); }
.bar-val { font-size: 13px; font-weight: 600; color: var(--t1); }
.wb-day { font-size: 12px; color: var(--t3); }
.wb.today .wb-day { color: var(--t1); font-weight: 600; }
.wb-legend { display: flex; gap: var(--s2); margin-top: var(--s2); font-size: 12px; color: var(--t3); }
.wb-legend span { display: inline-flex; align-items: center; gap: 6px; }
.wb-legend i { width: 8px; height: 8px; border-radius: 2px; background: rgba(255, 255, 255, 0.3); }
.wb-legend i.b { background: var(--blue); }

.timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.tl { position: relative; display: grid; grid-template-columns: 52px 16px minmax(0, 1fr); gap: 0 var(--s1); padding-bottom: var(--s2); }
.tl:last-child { padding-bottom: 0; }
.tl-time { font-size: 13px; font-weight: 600; color: var(--t1); padding-top: 1px; }
.tl-dot { position: relative; display: flex; justify-content: center; }
.tl-dot::before { content: ""; width: 9px; height: 9px; margin-top: 5px; border-radius: 50%; background: rgba(255, 255, 255, 0.5); box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08); }
.tl-dot::after { content: ""; position: absolute; top: 18px; bottom: -14px; width: 1px; background: var(--divider); }
.tl:last-child .tl-dot::after { display: none; }
.tl.termin .tl-dot::before { background: var(--blue); box-shadow: 0 0 0 3px rgba(var(--blue-rgb), 0.18); }
.tl.slot .tl-dot::before { background: transparent; border: 1.5px solid rgba(255, 255, 255, 0.45); width: 8px; height: 8px; }
.tl.past { opacity: 0.5; }
.tl-title { font-size: 14px; color: var(--t1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-sub { font-size: 12px; color: var(--t3); }
.tl-empty { color: var(--t3); font-size: 13px; }

.activity { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.act { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 0 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--divider); }
.act:first-child { border-top: 0; padding-top: 0; }
.act-ico { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--fill-2); color: var(--t1); }
.act-ico svg { width: 16px; height: 16px; }
.act-title { font-size: 13.5px; color: var(--t1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.act-sub { font-size: 12px; color: var(--t3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.act-when { font-size: 12px; color: var(--t3); white-space: nowrap; }

/* Systemanzeige (aus app.js) – klein und ruhig */
body.glas .sysstat { gap: 12px; font-family: var(--font); font-size: 12.5px; color: var(--t2); }
body.glas .sys-top { font-size: 12.5px; }
body.glas .sys-top b { color: var(--t1); font-weight: 600; }
body.glas .bar { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.10); }
body.glas .bar i { background: rgba(255, 255, 255, 0.75); box-shadow: none; border-radius: 2px; }
body.glas .bar.hot i { background: var(--amber); }
body.glas .spark { height: 28px; opacity: 0.8; }
body.glas .sys-grid { gap: var(--s1); }
body.glas .sys-cell { padding: 8px 10px; border-radius: var(--r-sm); background: var(--fill); border: 0; }
body.glas .sys-cell span { font-size: 11.5px; color: var(--t3); }
body.glas .sys-cell b { font-size: 13px; color: var(--t1); font-weight: 600; }
body.glas .ml-progress .bar i { background: var(--blue); }

/* ======================= Knöpfe & Felder ======================= */
body.glas :is(.btn-primary, .btn-ghost, .btn-danger) {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s1);
  min-height: 40px; padding: 0 var(--s2); border-radius: 12px; font-size: 14px; font-weight: 600; white-space: nowrap;
  transition: background 0.16s var(--ease), border-color 0.16s var(--ease), opacity 0.16s, transform 0.16s var(--ease);
}
body.glas .btn-primary { color: #fff; background: var(--blue); border: 0; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset, 0 4px 14px rgba(var(--blue-rgb), 0.25); }
body.glas .btn-primary:hover:not(:disabled) { background: #4c8ef8; }
body.glas .btn-primary:disabled { opacity: 0.45; }
body.glas .btn-ghost { color: var(--t1); background: var(--fill); border: 1px solid var(--line); }
body.glas .btn-ghost:hover { background: var(--fill-2); border-color: var(--line-2); color: var(--t1); }
body.glas .btn-danger { color: var(--red); background: rgba(248, 113, 113, 0.08); border: 1px solid rgba(248, 113, 113, 0.30); }
body.glas .btn-danger:hover { background: rgba(248, 113, 113, 0.14); }
body.glas :is(.btn-primary, .btn-ghost, .btn-danger):active:not(:disabled) { transform: scale(0.98); }
body.glas .icon-btn { border-radius: 10px; color: var(--t2); border: 0; background: transparent; }
body.glas .icon-btn:hover { color: var(--t1); background: var(--fill-2); border: 0; }
body.glas .icon-btn.danger:hover { color: var(--red); background: var(--red-bg); }
body.glas .icon-btn svg { width: 17px; height: 17px; }
body.glas .chip { padding: 0 14px; min-height: 32px; display: inline-flex; align-items: center; border-radius: 999px; font-size: 13px; color: var(--t2);
  background: var(--fill); border: 1px solid var(--line); }
body.glas .chip:hover { color: var(--t1); background: var(--fill-2); border-color: var(--line-2); }
body.glas .ml-sort .chip.active { color: #fff; background: var(--fill-3); border-color: var(--line-2); }

body.glas :is(.add-form label, .edit-form label, .pf, .pl-chat-select, .pl-filter label, .st-toolbar label) { font-size: 12.5px; font-weight: 400; color: var(--t2); gap: 6px; }
body.glas :is(input:not([type="checkbox"]):not([type="file"]), select, .pf textarea, textarea:not(#input):not(#plInput)) {
  font-family: var(--font); font-size: 14px; color: var(--t1); background: var(--field); border: 1px solid var(--line); border-radius: 12px;
  padding: 9px 12px; min-height: 40px; box-shadow: none; transition: border-color 0.16s var(--ease), box-shadow 0.16s var(--ease);
}
body.glas :is(input:not([type="checkbox"]):not([type="file"]), select, .pf textarea, textarea:not(#input):not(#plInput)):focus {
  border-color: rgba(var(--blue-rgb), 0.8); box-shadow: 0 0 0 3px rgba(var(--blue-rgb), 0.22); outline: 0;
}
body.glas ::placeholder { color: var(--t3); }
body.glas .check-item input { accent-color: var(--blue); }
body.glas .st-switch { font-size: 14px; color: var(--t1); min-height: 44px; }
body.glas .st-switch input { width: 46px; height: 28px; border-radius: 14px; background: rgba(255, 255, 255, 0.18); border: 0; padding: 0; min-height: 0; }
body.glas .st-switch input::after { top: 3px; left: 3px; width: 22px; height: 22px; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); }
body.glas .st-switch input:checked { background: var(--blue); }
body.glas .st-switch input:checked::after { transform: translateX(18px); }

/* ======================= Listen (Gedächtnis, Termine, Erinnerungen, Beiträge) ======================= */
body.glas .list { gap: 0; }
body.glas .list:has(.row) { padding: var(--s1); }
body.glas .row { position: relative; gap: var(--s2); padding: 12px 12px 12px var(--s2); border-radius: var(--r); background: transparent; border: 0; transition: background 0.16s var(--ease); }
body.glas .row + .row::before { content: ""; position: absolute; left: var(--s2); right: var(--s2); top: 0; height: 1px; background: var(--divider); }
body.glas .row:hover { background: var(--fill); border: 0; }
body.glas .row-title { color: var(--t1); font-size: 14px; }
body.glas .row-note { color: var(--t2); font-size: 12.5px; }
body.glas .row-when { min-width: 96px; padding: 4px 10px; border-radius: 8px; font-size: 12.5px; color: var(--t1); background: var(--fill-2); border: 0; }
body.glas .row-when.none { color: var(--t3); background: var(--fill); border: 0; }
body.glas .row.overdue .row-when { color: var(--red); background: var(--red-bg); border: 0; }
body.glas .tag { padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; color: var(--red); border: 0; background: var(--red-bg); }
body.glas .list-sep { margin: var(--s2) var(--s2) var(--s1); font-size: 12px; font-weight: 600; color: var(--t3); }
body.glas .list-empty { padding: var(--s4) var(--s2); color: var(--t2); font-size: 14px; border: 1px dashed var(--line-2); border-radius: var(--r-lg);
  background: var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
body.glas .confirm { color: var(--red); }
body.glas .add-form { gap: 12px; }

/* ======================= Popover, Suche, Hinweise ======================= */
.popover {
  position: fixed; z-index: 60; top: calc(76px + env(safe-area-inset-top, 0px)); right: var(--s3); width: 340px; max-width: calc(100vw - 32px);
  padding: var(--s2); border-radius: var(--r-lg); background: var(--glass-solid); border: 1px solid var(--line); box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); animation: g-in 0.16s var(--ease);
}
.popover .card-head { margin-bottom: var(--s1); }
.pop-user { display: flex; align-items: center; gap: 12px; padding: 4px 4px var(--s2); border-bottom: 1px solid var(--divider); margin-bottom: var(--s1); }
.pop-user b { display: block; font-size: 14px; }
.pop-item, .sheet-item, .sr-item {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 0 12px; border-radius: 12px; border: 0;
  background: transparent; color: var(--t1); font-size: 14px; text-align: left; cursor: pointer;
}
.pop-item:hover, .sheet-item:hover, .sr-item:hover, .sr-item.sel { background: var(--fill-2); }
.pop-item [data-ico], .sheet-item [data-ico], .sr-item [data-ico] { color: var(--t2); }
body.glas .upnext { gap: 2px; }
body.glas .up-item { grid-template-columns: auto minmax(0, 1fr); gap: 1px 12px; padding: 8px; border-radius: 12px; background: transparent; border: 0; }
body.glas .up-item:hover { background: var(--fill-2); border: 0; }
body.glas .up-kind { width: 32px; height: 32px; border-radius: 10px; border: 0; color: var(--t1); background: var(--fill-2); }
body.glas .up-kind.erinnerung, body.glas .up-kind.beitrag { color: var(--t1); background: var(--fill-2); border: 0; }
body.glas .up-title { font-size: 13.5px; color: var(--t1); }
body.glas .up-when { font-size: 12px; color: var(--t3); }
body.glas .up-item.overdue .up-when { color: var(--red); }
body.glas .up-empty { color: var(--t3); font-size: 13px; }

.search-scrim, .sheet-scrim { position: fixed; inset: 0; z-index: 70; background: rgba(6, 8, 12, 0.45); }
.search {
  position: fixed; z-index: 71; left: 50%; top: calc(12vh + env(safe-area-inset-top, 0px)); transform: translateX(-50%); width: min(640px, calc(100vw - 32px));
  border-radius: var(--r-xl); background: var(--glass-solid); border: 1px solid var(--line); box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); overflow: hidden; animation: g-in 0.16s var(--ease);
}
.search-field { display: flex; align-items: center; gap: 12px; padding: 0 var(--s2); border-bottom: 1px solid var(--divider); color: var(--t2); }
body.glas .search-field input { flex: 1; border: 0; background: transparent; box-shadow: none; min-height: 56px; padding: 0; font-size: 16px; border-radius: 0; }
body.glas .search-field input:focus { box-shadow: none; }
.search-results { max-height: min(56vh, 480px); overflow-y: auto; padding: var(--s1); }
.sr-group { padding: var(--s1) 12px 4px; font-size: 12px; color: var(--t3); }
.sr-item small { margin-left: auto; color: var(--t3); font-size: 12px; white-space: nowrap; }
.sr-item span.t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-empty { padding: var(--s3); text-align: center; color: var(--t3); }

body.glas .toast {
  border-radius: 14px; font-size: 14px; color: var(--t1); background: var(--glass-solid); border: 1px solid var(--line);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
}
body.glas .toast.error { color: #fecaca; border-color: rgba(248, 113, 113, 0.4); }
@keyframes g-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.search { animation-name: g-in-c; }
@keyframes g-in-c { from { opacity: 0; transform: translate(-50%, -4px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ======================= Chat ======================= */
.chat-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: var(--s2); height: 100%; padding: 0 var(--s3) var(--s3) 0; min-height: 0; }
body.glas .sidebar.card {
  display: flex; flex-direction: column; min-height: 0; padding: var(--s2); position: relative; transform: none; width: auto; inset: auto;
}
body.glas .side-head { display: flex; align-items: center; justify-content: space-between; padding: 4px 4px var(--s2); }
body.glas .side-head h3 { margin: 0; font-size: 15px; font-weight: 600; }
body.glas .newchat {
  display: flex; align-items: center; justify-content: flex-start; gap: var(--s1); width: 100%; min-height: 40px; padding: 0 12px; border-radius: 12px;
  font-size: 14px; font-weight: 600; color: var(--t1); background: var(--fill); border: 1px solid var(--line); box-shadow: none; margin-bottom: var(--s1);
}
body.glas .newchat:hover { background: var(--fill-2); border-color: var(--line-2); box-shadow: none; }
body.glas .chatlist { margin: 0 -4px; padding: 0 4px; }
body.glas .chat-group { margin: var(--s2) 8px 4px; font-size: 12px; color: var(--t3); }
body.glas .chat-item { border-radius: 10px; border: 0; }
body.glas .chat-item.active { background: var(--fill-2); border: 0; }
body.glas .chat-item.active::before { display: none; }
body.glas .chat-open { color: var(--t2); font-size: 13.5px; padding: 9px 6px 9px 10px; }
body.glas .chat-item.active .chat-open { color: var(--t1); }
body.glas .chat-empty { color: var(--t3); }
body.glas .chat-rename { background: var(--field); border: 1px solid rgba(var(--blue-rgb), 0.7); border-radius: 8px; min-height: 32px; }
.chat-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; border-radius: var(--r-lg);
  background: var(--glass); border: 1px solid var(--line); box-shadow: var(--shadow); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); overflow: hidden; }
.chat-bar { display: none; }
body.glas .view-chat .hero { display: none; }
body.glas .view-chat .status { margin: 0; padding: var(--s2) var(--s3) 0; text-align: left; font-family: var(--font); font-size: 12.5px; color: var(--t3); letter-spacing: 0; text-transform: none; min-height: 0; }
body.glas .view-chat .messages { padding: var(--s2) var(--s3); mask-image: none; -webkit-mask-image: none; }
body.glas .msg { max-width: 760px; margin: 0 auto var(--s2); animation: g-rise 0.2s var(--ease); }
body.glas .bubble { padding: 10px 14px; font-size: 14.5px; line-height: 1.55; }
body.glas .msg.assistant .bubble { background: var(--fill); border: 1px solid var(--divider); border-radius: 18px 18px 18px 6px; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
body.glas .msg.user .bubble { background: var(--blue); border: 0; color: #fff; border-radius: 18px 18px 6px 18px; box-shadow: none; }
body.glas .msg.error .bubble { background: var(--red-bg); border: 1px solid rgba(248, 113, 113, 0.3); color: #fecaca; border-radius: 18px 18px 18px 6px; }
body.glas .msg.notice { font-family: var(--font); font-size: 12.5px; color: var(--t3); letter-spacing: 0; text-transform: none; }
body.glas .bubble a { color: var(--blue-text); }
body.glas .msg.user .bubble a, body.glas .msg.user .bubble b { color: #fff; }
body.glas .bubble code { background: rgba(255, 255, 255, 0.10); }
body.glas .bubble pre { background: rgba(0, 0, 0, 0.30); border: 1px solid var(--divider); border-radius: 12px; }
body.glas .typing span { background: var(--t2); box-shadow: none; }
@keyframes g-rise { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
body.glas .view-chat .composer { padding: var(--s1) var(--s3) var(--s2); }
body.glas .composer-inner {
  max-width: 760px; border-radius: 26px; padding: 6px 6px 6px var(--s2);
  background: var(--glass-strong); border: 1px solid var(--line-2); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
}
body.glas .composer-inner:focus-within { border-color: rgba(var(--blue-rgb), 0.6); box-shadow: 0 0 0 3px rgba(var(--blue-rgb), 0.18); }
body.glas .composer textarea { color: var(--t1); font-size: 15px; }
body.glas .pb .composer textarea, body.glas.pb .composer textarea { min-height: 44px; }
body.glas #send, body.glas .send-btn { width: 40px; height: 40px; background: var(--blue); color: #fff; box-shadow: none; border-radius: 50%; }
body.glas #send:hover, body.glas .send-btn:hover { transform: none; background: #4c8ef8; }
body.glas #mic { width: 40px; height: 40px; color: var(--t2); background: var(--fill); border: 1px solid var(--line); box-shadow: none; }
body.glas #mic:hover { color: var(--t1); transform: none; box-shadow: none; }
body.glas #mic.active { color: #fff; background: var(--blue); border-color: transparent; box-shadow: 0 0 0 4px rgba(var(--blue-rgb), 0.2); }
body.glas #mic.active::before, body.glas #mic.active::after { border-color: rgba(var(--blue-rgb), 0.5); }
body.glas .hint { font-family: var(--font); font-size: 11.5px; color: var(--t3); letter-spacing: 0; text-transform: none; }

/* ======================= TikTok Production ======================= */
body.glas .bot-cards { gap: var(--s2); grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
body.glas .bot-card { gap: var(--s1); min-height: 200px; transition: transform 0.18s var(--ease), background 0.18s var(--ease); }
body.glas .bot-card:hover { transform: translateY(-2px); background: var(--glass-hover); border-color: var(--line); box-shadow: var(--shadow); }
body.glas .bot-card.soon { opacity: 0.55; }
body.glas .bot-card.soon:hover { transform: none; background: var(--glass); }
body.glas .bot-ico { width: 40px; height: 40px; border-radius: 12px; border: 0; color: var(--t1); background: var(--fill-2); }
body.glas .bot-ico svg { width: 20px; height: 20px; }
body.glas .bot-tag { padding: 3px 9px; border-radius: 999px; font-size: 12px; color: var(--t2); border: 0; background: var(--fill-2); }
body.glas .bot-card h3 { margin-top: var(--s1); font-size: 16px; font-weight: 600; color: var(--t1); }
body.glas .bot-card p { color: var(--t2); font-size: 13.5px; }
body.glas .bot-cta { font-size: 13px; font-weight: 600; color: var(--t1); }
body.glas .bot-card.soon .bot-cta { color: var(--t3); }

body.glas :is(.st-chip, .st-badge, .st-type) { padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1.5; border: 0 !important; }
body.glas .st-chip { color: var(--st); background: color-mix(in srgb, var(--st) 16%, transparent); }
body.glas .st-badge.ok { color: var(--green); background: var(--green-bg); }
body.glas .st-badge.warn { color: var(--amber); background: var(--amber-bg); }
body.glas .st-badge.busy { color: #c4b5fd; background: rgba(196, 181, 253, 0.14); }
body.glas .st-type { color: var(--t2) !important; background: var(--fill-2); }
body.glas .pl-chat { padding: var(--s2); }
body.glas .post-pillar { font-size: 12px; color: var(--t3); }
body.glas .post-hook { color: var(--t2); font-size: 12.5px; }
body.glas .week-nav .btn-ghost { min-height: 36px; }
body.glas .week-label { font-size: 15px; font-weight: 600; color: var(--t1); }
body.glas .week-grid { gap: var(--s1); }
body.glas .wk-day { padding: 10px; border-radius: var(--r); background: var(--glass); border: 1px solid var(--line); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
body.glas .wk-day.today { border-color: rgba(var(--blue-rgb), 0.7); box-shadow: none; }
body.glas .wk-head { border-bottom: 1px solid var(--divider); }
body.glas .wk-wd { font-size: 13px; font-weight: 600; color: var(--t1); }
body.glas .wk-day.today .wk-wd { color: var(--blue-text); }
body.glas .wk-date { font-size: 12px; color: var(--t3); }
body.glas .wk-empty { font-size: 12px; color: var(--t3); }
body.glas .wk-post { border-radius: 10px; border: 0; border-left: 3px solid var(--st); background: var(--fill); color: var(--t1); }
body.glas .wk-post:hover { transform: none; box-shadow: none; background: var(--fill-2); }
body.glas .wk-time { font-size: 12px; font-weight: 600; color: var(--t1); }
body.glas .wk-status { font-size: 11.5px; color: var(--t3); }
body.glas .legend { font-size: 12px; color: var(--t2); }
body.glas .lg i { box-shadow: none; border-radius: 50%; }
body.glas .pillar { border-radius: var(--r); background: var(--fill); border: 1px solid var(--divider); }
body.glas .pillar-sum { font-size: 13px; color: var(--green); }
body.glas .pillar-sum.bad { color: var(--red); }

/* Seitenfenster */
body.glas .drawer-scrim, body.glas .scrim { background: rgba(6, 8, 12, 0.45); -webkit-backdrop-filter: none; backdrop-filter: none; }
body.glas .drawer {
  top: var(--s2); bottom: var(--s2); right: var(--s2); width: min(560px, calc(100vw - 32px)); border-radius: var(--r-xl);
  background: var(--glass-solid); border: 1px solid var(--line); box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); transform: translateX(110%); transition: transform 0.28s var(--ease), visibility 0.28s;
}
body.glas .drawer.open { transform: none; }
body.glas .drawer-head { border-bottom: 1px solid var(--divider); padding: var(--s2) var(--s2) var(--s1) var(--s3); }
body.glas .drawer-tabs { gap: 4px; padding: 4px; border-radius: 999px; background: var(--fill); }
body.glas .drawer-tabs .tab { display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border-radius: 999px; font-size: 13.5px; color: var(--t2); }
body.glas .drawer-tabs .tab.active { color: #fff; background: var(--fill-3); font-weight: 600; }
body.glas .drawer-tabs .tab.active::after { display: none; }
body.glas .drawer-body { padding: var(--s3); gap: var(--s2); }
body.glas .drawer-title { font-size: 18px; font-weight: 600; color: var(--t1); }
body.glas .drawer-foot { border-top: 1px solid var(--divider); }
body.glas .pkg-when { font-size: 13px; color: var(--t1); }
body.glas .pkg-video { border-radius: var(--r); border: 1px solid var(--line); }
body.glas .pkg-video.empty { background: var(--fill); color: var(--t2); }
body.glas .pkg-info { color: var(--t2); }
body.glas .pkg-info b { color: var(--t1); }
body.glas .copy-head { font-size: 12.5px; font-weight: 600; color: var(--t2); }
body.glas .copy-text { border-radius: 12px; background: var(--field); border: 1px solid var(--line); color: var(--t1); font-size: 14px; }
body.glas .check-item { color: var(--t1); font-size: 14px; border-bottom: 1px solid var(--divider); }
body.glas .check-item input:checked + span { color: var(--t3); }
body.glas .posted-note { color: var(--green); font-size: 13.5px; }

/* Satisfying Studio */
body.glas .tabpanel { display: flex; flex-direction: column; gap: var(--s2); }
body.glas .view-planer .tabpanel[data-panel="chat"] { gap: 0; }
body.glas .st-hero { gap: var(--s3); }
body.glas .st-date { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; color: var(--t1); }
body.glas .st-status { font-size: 13px; color: var(--t2); gap: 4px var(--s2); }
body.glas .st-status span + span::before { color: var(--t3); }
body.glas .st-run { min-height: 44px !important; padding: 0 var(--s3) !important; font-size: 14px !important; border-radius: 12px !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset, 0 4px 14px rgba(var(--blue-rgb), 0.25) !important; }
body.glas .st-note { border-radius: var(--r); color: #fde68a; background: rgba(251, 191, 36, 0.10); border: 1px solid rgba(251, 191, 36, 0.24); font-size: 13.5px; }
body.glas .st-today { gap: var(--s2); }
body.glas .st-card { gap: var(--s2); }
body.glas .st-card-head h3 { font-size: 16px; font-weight: 600; color: var(--t1); }
body.glas .st-card-body { gap: var(--s3); grid-template-columns: minmax(220px, 280px) minmax(0, 1fr); }
body.glas .st-music { font-size: 13.5px; font-weight: 600; color: var(--t1); }
body.glas .st-meta { font-size: 12.5px; color: var(--t3); }
body.glas .st-checknote { color: var(--amber); }
body.glas .st-tags { font-size: 13.5px; color: var(--t2); font-family: var(--font); }
body.glas .st-checklist { border-radius: var(--r); background: var(--fill); border: 1px solid var(--divider); }
body.glas .st-video { border-radius: 16px; border: 1px solid var(--line); box-shadow: none; background: #0b0d12; }
body.glas .st-video.empty { background: var(--fill); border-style: dashed; border-color: var(--line-2); }
body.glas .st-video-msg { color: var(--t2); }
body.glas .st-video-msg svg { color: var(--t2); }
body.glas .st-err { color: var(--red); }
body.glas .st-spinner { border-color: rgba(255, 255, 255, 0.14); border-top-color: var(--t1); }
body.glas .st-dl { min-height: 36px !important; }
body.glas .st-ideas { gap: var(--s2); }
body.glas .st-idea { gap: var(--s1); }
body.glas .st-idea h4 { font-size: 15px; font-weight: 600; color: var(--t1); }
body.glas .st-tpl { font-size: 12.5px; color: var(--t2); font-family: var(--font); }
body.glas :is(.st-idea-date, .st-idea-status) { font-size: 12px; color: var(--t3); }
body.glas .st-concept { font-size: 14px; color: var(--t1); }
body.glas .st-wish { font-size: 13px; color: var(--t2); font-family: var(--font); }
body.glas .st-reason { font-size: 13px; color: var(--t2); }
body.glas .st-tech { font-size: 13px; color: #fde68a; }
body.glas .st-wish-row { border-radius: var(--r); background: var(--fill); border: 1px solid var(--divider); }
body.glas .st-wish-main b { color: var(--t1); font-size: 14px; }
body.glas .st-trend { border-radius: 12px; color: #fde68a; background: rgba(251, 191, 36, 0.10); border: 0; font-size: 13px; }
body.glas .st-trend b { color: var(--amber); font-family: var(--font); }
body.glas .st-storage-head { font-size: 13px; color: var(--t2); }
body.glas .st-storage-head b { color: var(--t1); font-weight: 600; }
body.glas .st-videos { gap: var(--s2); }
body.glas .st-thumb { border-radius: 16px; border: 1px solid var(--line); box-shadow: var(--shadow); }
body.glas .st-play { background: rgba(10, 12, 18, 0.55); border: 1px solid rgba(255, 255, 255, 0.25); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
body.glas .st-vinfo b { color: var(--t1); font-size: 13.5px; font-weight: 600; }
body.glas .st-cat-row { border-bottom: 1px solid var(--divider); }
body.glas .st-cat-row b { color: var(--t1); font-size: 14px; }
body.glas .st-cat-row code { color: var(--t2); font-size: 12px; }
body.glas .st-cat-row p { color: var(--t2); }

/* ======================= E-Mail ======================= */
body.glas .ml-state { border-radius: 12px; font-size: 14px; padding: 10px 14px; }
body.glas .ml-state.ok { color: #bbf7d0; background: rgba(74, 222, 128, 0.10); border: 1px solid rgba(74, 222, 128, 0.25); }
body.glas .ml-state.warn { color: #fde68a; background: rgba(251, 191, 36, 0.10); border: 1px solid rgba(251, 191, 36, 0.25); }
body.glas .ml-state.bad { color: #fecaca; background: rgba(248, 113, 113, 0.10); border: 1px solid rgba(248, 113, 113, 0.30); }
body.glas .ml-copyrow code { border-radius: 12px; background: var(--field); border: 1px solid var(--line); color: var(--t2); }
body.glas .ml-progress .sys-top { font-size: 13px; color: var(--t2); }
body.glas .ml-sub { font-size: 13px; font-weight: 600; color: var(--t2); }
body.glas .ml-top-row { border-bottom: 1px solid var(--divider); }
body.glas .ml-top-row .ml-name { color: var(--t1); font-size: 14px; }
body.glas .ml-top-row .ml-addr { font-size: 12px; color: var(--t3); }
body.glas .ml-top-row b { font-size: 13.5px; color: var(--t1); font-weight: 600; text-align: right; }
body.glas :is(.ml-top-row .ml-unread, .ml-num.ml-unread) { color: var(--t2); font-size: 12.5px; }
body.glas .ml-row { border-bottom: 1px solid var(--divider); padding: 10px 4px; }
body.glas .ml-head { font-size: 12px; font-weight: 600; color: var(--t3); border-bottom-color: var(--line); }
body.glas .ml-who b { color: var(--t1); font-weight: 600; }
body.glas .ml-who small { font-size: 12px; color: var(--t3); font-family: var(--font); }
body.glas :is(.ml-num, .ml-date) { font-size: 13px; color: var(--t2); text-align: right; }
body.glas .ml-open { font-size: 13px !important; min-height: 32px !important; }

/* ======================= Einstellungen ======================= */
.bg-choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--s2); }
.bg-choice { position: relative; display: flex; flex-direction: column; gap: var(--s1); padding: 0; border: 0; background: none; color: var(--t2); cursor: pointer; text-align: left; font-size: 13px; }
.bg-choice .thumb { aspect-ratio: 16 / 10; border-radius: var(--r); background: #222 center / cover no-repeat; border: 1px solid var(--line); transition: box-shadow 0.16s var(--ease); }
.bg-choice:hover .thumb { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35); }
.bg-choice[aria-checked="true"] { color: var(--t1); }
.bg-choice[aria-checked="true"] .thumb { box-shadow: 0 0 0 2px var(--blue); }
.bg-choice .thumb.none { display: grid; place-items: center; color: var(--t3); background: var(--fill); }
.bg-upload-row { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; margin-top: var(--s2); }
.bg-upload { position: relative; overflow: hidden; cursor: pointer; }
.bg-upload input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); flex-wrap: wrap; }
.set-row b { display: block; font-size: 14px; }
body.glas .tts-toggle { display: inline-flex; }
body.glas .tts-toggle.off { color: var(--t3); }
body.glas .tts-toggle:not(.off) svg { color: var(--t1); filter: none; }
.credits { margin: 0; }

/* ======================= Login ======================= */
body.login.glas { display: grid; place-items: center; min-height: 100dvh; padding: var(--s2); }
body.login.glas .login-card { position: relative; z-index: 1; max-width: 380px; }
body.login.glas .login-card .orb { display: none; }
.login-mark { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; margin: 0 0 var(--s3); font-size: 22px; font-weight: 600; color: #fff; background: var(--blue); }
body.login.glas .login-card h1 { margin: 0; font-size: 26px; font-weight: 600; letter-spacing: -0.01em; padding: 0; color: var(--t1); }
body.login.glas .login-card .sub { margin: var(--s1) 0 var(--s3); font-size: 14px; color: var(--t2); }
body.login.glas .login-card form {
  gap: var(--s2); padding: var(--s3); border-radius: var(--r-xl); background: var(--glass); border: 1px solid var(--line); box-shadow: var(--shadow);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
}
body.login.glas .login-card label { font-size: 13px; color: var(--t2); gap: 6px; }
body.login.glas .login-card input { font-size: 16px; min-height: 46px; border-radius: 12px; background: var(--field); border: 1px solid var(--line); color: var(--t1); }
body.login.glas .login-card input:focus { border-color: rgba(var(--blue-rgb), 0.8); box-shadow: 0 0 0 3px rgba(var(--blue-rgb), 0.22); }
body.login.glas .login-card button { min-height: 46px; border-radius: 12px; font-size: 15px; font-weight: 600; color: #fff; background: var(--blue); box-shadow: none; padding: 0 var(--s2); }
body.login.glas .login-card button:hover:not(:disabled) { background: #4c8ef8; box-shadow: none; }
body.login.glas .error { color: var(--red); text-shadow: none; }

/* ======================= Mittlere Breite ======================= */
@media (max-width: 1279px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ov-week { grid-column: span 12; }
  .ov-today { grid-column: span 6; grid-row: auto; }
  .ov-activity { grid-column: span 6; }
  .ov-system, .ov-action { grid-column: span 6; }
}
@media (max-width: 1099px) {
  .chat-layout { grid-template-columns: 240px minmax(0, 1fr); }
  .topbar { grid-template-columns: minmax(0, 1fr) auto; }
  .tb-tabs { grid-column: 1 / -1; grid-row: 2; justify-self: start; }
  .tb-title { grid-row: 1; }
}

/* ======================= Handy ======================= */
@media (max-width: 899px) {
  :root { --blur: blur(20px) saturate(140%); }
  /* Unschärfe sparsam: Foto ist schon unscharf, Karten ohne eigene Unschärfe */
  .bg { background-image: var(--bg-img-s, var(--bg-img, none)); filter: blur(22px) brightness(0.62) saturate(0.95); inset: -60px; }
  body.glas :is(.card, .panel, .bot-card, .st-idea, .list:has(.row), .kpi, .wk-day, .list-empty, .chat-main) {
    -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(28, 32, 42, 0.56); box-shadow: none;
  }
  body.glas .shell { padding-left: 0; }
  .topbar {
    grid-template-columns: minmax(0, 1fr) auto; gap: 12px var(--s1);
    padding: calc(12px + env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right)) 12px max(16px, env(safe-area-inset-left));
  }
  body.glas .mobilebar-title { font-size: 17px; }
  .tb-tabs { grid-column: 1 / -1; grid-row: 2; justify-self: stretch; border-radius: 999px; -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(28, 32, 42, 0.6); }
  .tb-tabs:empty { display: none; }
  .tb-tab { height: 36px; min-height: 36px; padding: 0 14px; }
  .round-btn { width: 44px; height: 44px; -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(28, 32, 42, 0.6); }

  /* Schwebende Tab-Leiste unten */
  .dock {
    left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right)); top: auto; bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    transform: none; width: auto; height: 64px; flex-direction: row; justify-content: space-around; padding: 0 6px; border-radius: 32px;
    background: rgba(24, 28, 37, 0.72); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  }
  .dock-brand, .dock-sep, .dock .dock-more-hide { display: none !important; }
  .dock .dock-more { display: flex; }
  .dock .nav-item { flex: 1 1 0; width: auto; max-width: 84px; height: 56px; border-radius: 24px; flex-direction: column; gap: 3px; }
  .dock .nav-item.active { background: rgba(255, 255, 255, 0.12); }
  .dock .nav-label { position: static; opacity: 1; transform: none; padding: 0; background: none; border: 0; box-shadow: none; font-size: 10.5px; color: inherit; }
  .dock .nav-ico, .dock .nav-ico svg { width: 22px; height: 22px; }
  body.kb .dock { display: none; }

  body.glas .view-inner, body.glas .view-inner.wide, body.glas .view-inner.xwide {
    max-width: none; padding: 4px max(16px, env(safe-area-inset-right)) calc(104px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left)); gap: var(--s2);
  }
  body.glas :is(.card, .panel, .bot-card, .st-idea, .kpi) { padding: var(--s2); border-radius: var(--r-lg); }
  body.glas .view-head h2 { font-size: 24px; }
  .ov-head h2 { font-size: 26px; }
  .ov-head p { font-size: 14px; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  body.glas .kpi { min-height: 148px; padding: var(--s2) var(--s2) 12px; }
  .kpi-value { font-size: 26px; }
  .kpi-row { flex-wrap: wrap; }
  .kpi-row .pill { margin-left: 0; }
  .ov-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .ov-grid > * { grid-column: auto !important; grid-row: auto !important; }
  .weekbars { height: 168px; gap: var(--s1); }
  .wb-bar { border-radius: 9px; }
  .wb-bar i { border-radius: 9px; }

  /* Chat: Liste als Blatt von links, Eingabe als Pille über der Tab-Leiste */
  .chat-layout { grid-template-columns: minmax(0, 1fr); padding: 0; gap: 0; }
  .chat-main { border-radius: 0; border: 0; background: transparent !important; }
  .chat-bar { display: flex; padding: 0 max(16px, env(safe-area-inset-right)) var(--s1) max(16px, env(safe-area-inset-left)); }
  .chat-list-btn { min-height: 40px !important; }
  body.glas .sidebar.card {
    position: fixed; z-index: 75; top: 0; bottom: 0; left: 0; width: min(86vw, 340px); border-radius: 0 var(--r-xl) var(--r-xl) 0;
    padding: calc(16px + env(safe-area-inset-top, 0px)) 14px calc(16px + env(safe-area-inset-bottom, 0px)) max(14px, env(safe-area-inset-left));
    background: rgba(24, 28, 37, 0.94) !important; -webkit-backdrop-filter: var(--blur) !important; backdrop-filter: var(--blur) !important;
    transform: translateX(-104%); transition: transform 0.28s var(--ease); box-shadow: 24px 0 60px rgba(0, 0, 0, 0.45);
  }
  body.menu-open .sidebar.card { transform: none; }
  body.glas .scrim { z-index: 74; }
  body.glas .view-chat .status { padding: 0 max(16px, env(safe-area-inset-left)); }
  body.glas .view-chat .messages { padding: var(--s1) max(16px, env(safe-area-inset-right)) var(--s1) max(16px, env(safe-area-inset-left)); }
  body.glas .view-chat .composer { padding: var(--s1) max(12px, env(safe-area-inset-right)) calc(86px + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left)); }
  body.kb .view-chat .composer { padding-bottom: 10px; }
  body.glas .composer-inner { background: rgba(24, 28, 37, 0.80); }
  body.glas .bubble { max-width: 86%; }
  body.glas #send, body.glas #mic, body.glas .send-btn { width: 44px; height: 44px; }

  /* iPhone: 16px in Feldern verhindert automatisches Zoomen */
  body.glas :is(input:not([type="checkbox"]):not([type="file"]), select, .pf textarea, textarea, .composer textarea) { font-size: 16px; min-height: 44px; }
  body.glas.pb .composer textarea { min-height: 44px; }

  /* Tippflächen mindestens 44px */
  body.glas :is(.btn-primary, .btn-ghost, .btn-danger, .chip, .back-link, .st-dl, .copy-btn, .copy-all, .ml-open,
    .st-del .btn-danger, .st-del .btn-ghost, .st-del.compact .btn-danger, .st-del.compact .btn-ghost, .st-actions .btn-ghost,
    .st-actions .st-dl, .week-nav .btn-ghost, .drawer-tabs .tab, .tb-tab) { min-height: 44px !important; }
  body.glas :is(.icon-btn, .chat-actions .icon-btn) { width: 44px; height: 44px; }
  body.glas :is(.chat-open, .newchat) { min-height: 44px; }
  body.glas .tab-action { bottom: calc(86px + env(safe-area-inset-bottom, 0px)) !important; right: max(16px, env(safe-area-inset-right)); border-radius: 26px; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45); }

  body.glas .st-card-body { grid-template-columns: minmax(0, 1fr); }
  body.glas .st-run { width: 100%; }
  body.glas .drawer { top: 0; bottom: 0; right: 0; width: 100vw; border-radius: 0; }
  body.glas .drawer-head { padding: calc(12px + env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right)) var(--s1) max(16px, env(safe-area-inset-left)); }

  .popover { right: max(12px, env(safe-area-inset-right)); top: calc(68px + env(safe-area-inset-top, 0px)); }
  .search { top: calc(12px + env(safe-area-inset-top, 0px)); }

  /* „Mehr“-Blatt */
  .sheet {
    position: fixed; z-index: 71; left: max(8px, env(safe-area-inset-left)); right: max(8px, env(safe-area-inset-right)); bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    padding: var(--s1) var(--s1) var(--s2); border-radius: var(--r-xl); background: rgba(28, 32, 42, 0.96); border: 1px solid var(--line);
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.4); transform: translateY(120%); transition: transform 0.26s var(--ease); visibility: hidden;
  }
  .sheet.open { transform: none; visibility: visible; }
  .sheet-grip { width: 36px; height: 4px; border-radius: 2px; background: var(--line-2); margin: 4px auto var(--s1); }
  .sheet-item { min-height: 52px; font-size: 16px; }
}
@media (min-width: 900px) { .sheet, .sheet-scrim { display: none !important; } }

/* Handy quer: wenig Höhe */
@media (max-width: 999px) and (max-height: 520px) {
  .topbar { padding-top: calc(8px + env(safe-area-inset-top, 0px)); padding-bottom: 8px; }
  .dock { height: 52px; bottom: calc(6px + env(safe-area-inset-bottom, 0px)); }
  .dock .nav-item { height: 46px; }
  .dock .nav-label { display: none; }
  body.glas .view-chat .composer { padding-bottom: calc(66px + env(safe-area-inset-bottom, 0px)); }
  body.glas .view-inner, body.glas .view-inner.wide, body.glas .view-inner.xwide { padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
  .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .weekbars { height: 120px; }
}

/* ======================= Weniger Bewegung ======================= */
@media (prefers-reduced-motion: reduce) {
  body.glas *, body.glas *::before, body.glas *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
  body.glas .kpi:hover, body.glas .bot-card:hover { transform: none; }
}

/* ---------- Nachbesserungen Entwurf 2 ---------- */
body.glas .mobilebar-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.tb-brand { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; color: var(--t1); }
.tb-brand[hidden], .tb-back[hidden] { display: none; }
.tb-mark { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 600; color: #fff; background: var(--blue); }
.tb-back { display: inline-flex; align-items: center; gap: 4px; min-height: 40px; padding: 0 14px 0 8px; border-radius: 999px; cursor: pointer;
  font-size: 14px; color: var(--t1); background: var(--glass); border: 1px solid var(--line); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
.tb-back:hover { background: var(--glass-hover); }
body.glas .view-planer .back-link, body.glas .view-studio .back-link { display: none; }
@media (max-width: 899px) {
  body.glas :is(.btn-primary, .btn-ghost, .btn-danger) { white-space: normal; text-align: center; line-height: 1.3; padding-top: 8px; padding-bottom: 8px; }
  .kpi-top { font-size: 12.5px; align-items: flex-start; }
  .kpi-top > span:last-child { line-height: 1.3; padding-top: 6px; }
  .tb-back { min-height: 44px; background: rgba(28, 32, 42, 0.6); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ---------- Logo ---------- */
img.tb-mark { width: 28px; height: 28px; border-radius: 50%; background: none; display: block; }
img.login-mark { width: 64px; height: 64px; border-radius: 50%; background: none; display: block; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3); }
body.glas input[type="file"] { font-size: 13px; color: var(--t2); padding: 8px; border-radius: 12px; background: var(--field); border: 1px solid var(--line); }
body.glas input[type="file"]::file-selector-button {
  margin-right: 12px; min-height: 32px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--line); cursor: pointer;
  font: 600 13px var(--font); color: var(--t1); background: var(--fill-2);
}
@media (max-width: 899px) {
  body.glas :is(input:not([type="checkbox"]):not([type="file"]), select) { min-height: 44px !important; }
  body.glas .week-nav .btn-ghost { min-width: 44px; }
  .weekbars { gap: 2px; }
  .wb-bar { max-width: 34px; }
}

/* Wenig Höhe (Handy quer, auch über 900 px breit): Symbolleiste scrollbar, Tippflächen mindestens 44 px */
.dock { max-height: calc(var(--app-h) - 24px); overflow-y: auto; scrollbar-width: none; }
.dock::-webkit-scrollbar { display: none; }
.dock .nav-item { flex-shrink: 0; }
@media (max-height: 520px), (pointer: coarse) {
  .round-btn { width: 44px; height: 44px; }
  .tb-tab { height: 44px; }
  .tb-back { min-height: 44px; }
  body.glas :is(.btn-primary, .btn-ghost, .btn-danger, .chip, .st-dl, .copy-btn, .copy-all, .ml-open, .drawer-tabs .tab,
    .st-del .btn-danger, .st-del .btn-ghost, .week-nav .btn-ghost) { min-height: 44px !important; }
  body.glas :is(input:not([type="checkbox"]):not([type="file"]), select) { min-height: 44px !important; font-size: 16px; }
  body.glas :is(.icon-btn, .chat-actions .icon-btn) { width: 44px; height: 44px; }
  body.glas :is(.chat-open, .newchat) { min-height: 44px; }
  body.glas .week-nav .btn-ghost { min-width: 44px; }
}
@media (min-width: 900px) and (max-height: 520px) {
  .dock { top: 12px; transform: none; padding: 8px 0; }
  .dock-sep { display: none; }
  .topbar { padding-top: calc(12px + env(safe-area-inset-top, 0px)); padding-bottom: 8px; }
  body.glas .shell { padding-left: calc(var(--dock-w) + max(16px, env(safe-area-inset-left)) + 16px); }
  .dock { left: max(12px, env(safe-area-inset-left)); }
  .topbar { padding-right: max(16px, env(safe-area-inset-right)); }
  body.glas .view-inner, body.glas .view-inner.wide, body.glas .view-inner.xwide { padding-right: max(16px, env(safe-area-inset-right)); }
  .chat-layout { padding-right: max(16px, env(safe-area-inset-right)); padding-bottom: 12px; grid-template-columns: 220px minmax(0, 1fr); }
}
@media (max-height: 520px), (pointer: coarse) {
  body.glas #send, body.glas #mic, body.glas .send-btn { width: 44px; height: 44px; }
  .bg-upload { min-height: 44px; }
}