:root {
      color-scheme: light;
      --bg: #f7f9fc;
      --panel: rgba(255, 255, 255, .82);
      --panel-solid: #ffffff;
      --panel-2: rgba(239, 244, 249, .88);
      --ink: #101520;
      --muted: #657084;
      --line: rgba(190, 202, 219, .62);
      --brand: #6d5df6;
      --brand-2: #23a7b5;
      --good: #18a058;
      --warn: #c88719;
      --danger: #cc3d5a;
      --shadow: 0 18px 48px rgba(31, 37, 56, .11);
      --soft-shadow: 0 8px 26px rgba(31, 37, 56, .08);
      --mist-soft: rgba(109, 93, 246, .12);
      --mist-medium: rgba(109, 93, 246, .22);
      --mist-strong: rgba(109, 93, 246, .28);
      --radius: 28px;
      --ease: cubic-bezier(.2, .8, .2, 1);
      --chat-bg-image: none;
      --chat-bg-size: cover;
      --chat-bg-overlay: rgba(255, 255, 255, .62);
    }
    [data-theme="dark"] {
      color-scheme: dark;
      --bg: #0e1219;
      --panel: rgba(22, 28, 38, .82);
      --panel-solid: #161c26;
      --panel-2: rgba(30, 39, 52, .9);
      --ink: #f4f7fb;
      --muted: #9ba7bb;
      --line: rgba(82, 97, 122, .5);
      --shadow: 0 16px 42px rgba(0, 0, 0, .32);
      --soft-shadow: 0 8px 26px rgba(0, 0, 0, .22);
      --chat-bg-overlay: rgba(14, 18, 25, .42);
    }
    * { box-sizing: border-box; }
    [hidden] { display: none !important; }
    html {
      width: 100%;
      overflow-x: hidden;
    }
    body {
      margin: 0;
      width: 100%;
      min-height: 100vh;
      overflow-x: hidden;
      background:
        linear-gradient(180deg, color-mix(in srgb, var(--bg) 96%, white) 0%, var(--bg) 48%, color-mix(in srgb, var(--bg) 88%, #e9f7f6) 100%);
      color: var(--ink);
      font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", sans-serif;
      font-weight: 400;
      letter-spacing: 0;
    }
    button, input, textarea, select {
      font: inherit;
      letter-spacing: 0;
    }
    button {
      border: 0;
      cursor: pointer;
      color: inherit;
    }
    .app {
      min-height: 100vh;
      display: grid;
      grid-template-columns: 280px 1fr;
    }
    aside {
      border-right: 1px solid var(--line);
      padding: 18px;
      display: flex;
      flex-direction: column;
      gap: 18px;
      background: color-mix(in srgb, var(--panel-solid) 70%, transparent);
      backdrop-filter: blur(24px);
      -webkit-backdrop-filter: blur(24px);
    }
    .brand {
      display: flex;
      align-items: center;
      gap: 12px;
      min-height: 54px;
    }
    .brand img {
      width: 42px;
      height: 42px;
      object-fit: contain;
      filter: drop-shadow(0 10px 20px var(--mist-strong));
    }
    .brand strong {
      display: block;
      font-size: 19px;
      font-weight: 560;
    }
    .brand span {
      display: block;
      color: var(--muted);
      font-size: 12px;
      margin-top: 2px;
    }
    nav {
      display: grid;
      gap: 8px;
    }
    .nav-btn, .workspace-btn, .icon-btn, .primary, .ghost {
      border-radius: 18px;
      min-height: 44px;
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 0 12px;
      background: transparent;
      transition: transform .22s var(--ease), background .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease), opacity .22s var(--ease);
    }
    .nav-btn {
      color: var(--muted);
      justify-content: flex-start;
      font-weight: 470;
    }
    .nav-btn:hover {
      transform: translateY(-1px);
      background: color-mix(in srgb, var(--panel-2) 78%, transparent);
      color: var(--ink);
    }
    .nav-btn.active {
      color: white;
      background: linear-gradient(135deg, var(--brand), color-mix(in srgb, var(--brand-2) 72%, var(--brand)));
      box-shadow: 0 14px 30px var(--mist-strong);
    }
    .nav-label {
      min-width: 0;
    }
    .nav-icon {
      width: 24px;
      text-align: center;
      font-size: 19px;
      line-height: 1;
      margin-left: auto;
    }
    .side-section h2 {
      margin: 0 0 9px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 520;
      text-transform: uppercase;
    }
    .workspace-list {
      display: grid;
      gap: 7px;
    }
    .nav-spaces {
      display: none;
    }
    .nav-more {
      border-top: 1px solid var(--line);
      margin-top: 4px;
      padding-top: 8px;
    }
    .nav-more summary {
      min-height: 40px;
      padding: 0 12px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: var(--muted);
      cursor: pointer;
      font-size: 13px;
      font-weight: 600;
      list-style: none;
    }
    .nav-more summary::-webkit-details-marker {
      display: none;
    }
    .nav-more summary::after {
      content: "⌄";
      transition: transform .18s var(--ease);
    }
    .nav-more[open] summary::after {
      transform: rotate(180deg);
    }
    .nav-more .nav-btn {
      width: 100%;
      margin-top: 4px;
    }
    .nav-group-label {
      margin: 12px 12px 2px;
      color: var(--muted);
      font-size: 11px;
      font-weight: 650;
      letter-spacing: .06em;
      text-transform: uppercase;
    }
    .workspace-btn {
      width: 100%;
      text-align: left;
      background: var(--panel-2);
      color: var(--ink);
      justify-content: space-between;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22);
    }
    .workspace-btn:hover, .ghost:hover, .icon-btn:hover {
      transform: translateY(-1px);
      box-shadow: var(--soft-shadow);
    }
    .workspace-btn.active {
      outline: 2px solid color-mix(in srgb, var(--brand) 70%, transparent);
    }
    .workspace-manage {
      width: 100%;
      min-height: 42px;
      margin-top: 8px;
      border: 1px dashed color-mix(in srgb, var(--brand) 48%, var(--line));
      border-radius: 16px;
      background: color-mix(in srgb, var(--brand) 7%, var(--panel-2));
      color: var(--ink);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 0 12px;
      font-weight: 520;
      transition: background .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
    }
    .workspace-manage:hover {
      transform: translateY(-1px);
      box-shadow: var(--soft-shadow);
      background: color-mix(in srgb, var(--brand) 12%, var(--panel-2));
    }
    .workspace-name {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .status-pill {
      margin-top: auto;
      border: 1px solid var(--line);
      border-radius: 16px;
      padding: 12px;
      background: var(--panel);
      color: var(--muted);
      font-size: 13px;
      line-height: 1.35;
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
    }
    .status-dot {
      display: inline-block;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--warn);
      margin-right: 7px;
    }
    .status-dot.ok { background: var(--good); }
    main {
      min-width: 0;
      display: grid;
      grid-template-rows: 72px 1fr;
    }
    header {
      border-bottom: 1px solid var(--line);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      padding: 0 22px;
      background: color-mix(in srgb, var(--bg) 82%, transparent);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
    }
    .page-title {
      min-width: 0;
    }
    .page-title h1 {
      margin: 0;
      font-size: 20px;
      font-weight: 560;
    }
    .page-title p {
      margin: 4px 0 0;
      color: var(--muted);
      font-size: 13px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .header-actions {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .settings-shortcut {
      display: none;
    }
    #preferenceForm { min-width: 0; }
    #preferenceForm .field { min-width: 0; }
    #preferencesList .quick-row, #playbooksList .quick-row, #installedSkillsList .quick-row { align-items: flex-start; gap: 10px; }
    .settings-section-heading { grid-column: 1 / -1; margin: 8px 0 -2px; padding: 4px 4px 0; }
    .settings-section-heading h2 { margin: 0; font-size: 16px; letter-spacing: -.01em; }
    .settings-section-heading p { margin: 4px 0 0; font-size: 12px; color: var(--muted); }
    #remoteAccessPanel { display: none !important; }
    @media (max-width: 680px) {
      #preferenceForm { grid-template-columns: 1fr !important; }
      #preferenceForm button { width: 100%; }
      #personalContextPanel textarea, #playbooksPanel textarea, #customSkillsPanel textarea { min-height: 90px; }
    }
    .chat-back {
      display: none;
    }
    .icon-btn {
      width: 42px;
      justify-content: center;
      padding: 0;
      background: var(--panel);
      border: 1px solid var(--line);
      box-shadow: var(--shadow);
    }
    .icon-btn:hover {
      background: color-mix(in srgb, var(--panel-solid) 76%, var(--panel-2));
    }
    .content {
      min-height: 0;
      overflow: auto;
      padding: 22px;
    }
    .view {
      display: none;
      height: 100%;
    }
    .view.active {
      display: block;
      animation: viewIn .28s var(--ease);
    }
    @keyframes viewIn {
      from { opacity: 0; transform: translateY(8px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .grid {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: 16px;
    }
    .panel {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 16px;
      box-shadow: var(--shadow);
      backdrop-filter: blur(22px);
      -webkit-backdrop-filter: blur(22px);
      transition: transform .24s var(--ease), box-shadow .24s var(--ease), border-color .24s var(--ease);
    }
    .panel:hover {
      transform: translateY(-2px);
      box-shadow: 0 22px 56px rgba(31, 37, 56, .13);
    }
    .chat-panel:hover {
      transform: none;
    }
    .jobs-toolbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 14px;
      flex-wrap: wrap;
    }
    .job-list {
      display: grid;
      gap: 10px;
    }
    .job-card {
      border: 1px solid var(--line);
      border-radius: 18px;
      background: color-mix(in srgb, var(--panel-2) 42%, transparent);
      padding: 12px;
      display: grid;
      gap: 9px;
      transition: background .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease);
    }
    .job-card:hover {
      background: color-mix(in srgb, var(--panel-2) 64%, transparent);
      border-color: color-mix(in srgb, var(--brand) 42%, var(--line));
      transform: translateY(-1px);
    }
    .job-head {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 10px;
      align-items: start;
    }
    .job-title {
      min-width: 0;
      font-weight: 560;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .job-meta {
      color: var(--muted);
      font-size: 12px;
    }
    .job-status {
      border-radius: 999px;
      padding: 5px 9px;
      font-size: 12px;
      color: white;
      background: color-mix(in srgb, var(--muted) 80%, var(--brand));
      white-space: nowrap;
    }
    .job-status.running, .job-status.queued {
      background: linear-gradient(135deg, var(--brand), var(--brand-2));
    }
    .job-status.done {
      background: var(--good);
    }
    .job-status.error, .job-status.cancelled {
      background: var(--danger);
    }
    .job-status.needs_approval {
      background: var(--warn);
    }
    .job-progress {
      color: var(--muted);
      line-height: 1.4;
    }
    .job-context-row { display: flex; gap: 6px; flex-wrap: wrap; }
    .job-context-chip {
      display: inline-flex;
      align-items: center;
      min-height: 25px;
      max-width: 100%;
      padding: 3px 8px;
      border-radius: 999px;
      background: color-mix(in srgb, var(--brand) 10%, var(--panel-2));
      color: var(--muted);
      font-size: 11px;
      line-height: 1.2;
    }
    .job-context-approval {
      background: color-mix(in srgb, var(--warn) 16%, var(--panel-2));
      color: color-mix(in srgb, var(--warn) 70%, var(--ink));
    }
    .job-actions {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }
    .job-error-box {
      display: grid;
      gap: 6px;
      border: 1px solid color-mix(in srgb, var(--danger) 35%, var(--line));
      border-radius: 14px;
      padding: 9px;
      background: color-mix(in srgb, var(--danger) 8%, var(--panel-2));
      color: var(--ink);
      font-size: 13px;
      line-height: 1.35;
    }
    .job-error-box strong {
      font-weight: 620;
    }
    .job-open-hint {
      color: var(--muted);
      font-size: 12px;
    }
    .job-card .attachment-grid {
      grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
      gap: 8px;
      margin-top: 0;
    }
    .job-card .attachment-card {
      max-width: 260px;
      min-height: 118px;
      border-radius: 14px;
      padding: 7px;
    }
    .job-card .attachment-card img,
    .job-card .attachment-card embed {
      height: 84px;
      border-radius: 9px;
    }
    .job-card .attachment-card iframe {
      height: 104px;
    }
    .job-actions .ghost,
    .job-actions .primary {
      min-height: 34px;
      border-radius: 12px;
      padding: 0 10px;
      font-size: 13px;
    }
    .job-events {
      display: grid;
      gap: 4px;
      color: var(--muted);
      font-size: 12px;
    }
    .team-toolbar, .team-project-tabs, .team-card-meta { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
    .team-toolbar { justify-content:space-between; gap:16px; margin-bottom:12px; }
    .team-toolbar-copy { min-width:0; }
    .team-toolbar-copy h3 { margin:0 0 4px; }
    .team-toolbar-actions { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
    .team-toolbar-actions .team-view-filter { width:auto; min-width:150px; }
    .team-create-form { display:grid; grid-template-columns:minmax(180px,1fr) minmax(220px,1.3fr) 170px auto auto; gap:8px; align-items:end; padding:12px; margin:0 0 12px; border:1px solid color-mix(in srgb, var(--brand) 22%, var(--line)); border-radius:16px; background:color-mix(in srgb, var(--brand) 6%, var(--panel-solid)); }
    .team-create-form[hidden] { display:none; }
    .team-create-form .field { margin:0; }
    .team-project-tabs { margin-bottom:12px; gap:8px; }
    .team-project-tab { display:inline-flex; align-items:center; gap:7px; min-height:38px; border-radius:13px; padding:0 11px; }
    .team-project-tab.active { background:var(--accent); color:white; border-color:transparent; }
    .team-project-tab .team-project-count { opacity:.72; font-size:11px; }
    .team-project-tab .team-project-visibility { font-size:10px; padding:2px 6px; border-radius:999px; background:color-mix(in srgb, currentColor 12%, transparent); }
    .team-board-header { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin:4px 0 12px; padding:12px 14px; border:1px solid var(--line); border-radius:16px; background:color-mix(in srgb, var(--panel-2) 72%, var(--panel-solid)); }
    .team-board-header h4 { margin:0 0 3px; font-size:16px; }
    .team-board-header p { margin:0; color:var(--muted); font-size:12px; line-height:1.4; }
    .team-board-badge { flex:0 0 auto; color:var(--brand); font-size:12px; font-weight:650; padding:6px 9px; border-radius:999px; background:color-mix(in srgb, var(--brand) 12%, transparent); }
    .kanban-board { display:grid; grid-template-columns:repeat(5,minmax(210px,1fr)); gap:12px; overflow-x:auto; padding:2px 2px 12px; }
    .kanban-column { background:color-mix(in srgb, var(--panel-2) 62%, var(--bg)); border:1px solid var(--line); border-radius:16px; padding:10px; min-height:300px; }
    .kanban-column h4 { margin:2px 2px 10px; display:flex; justify-content:space-between; font-size:13px; }
    .kanban-column h4 small { color:var(--muted); font-weight:600; }
    .kanban-card { background:var(--panel-solid); border:1px solid var(--line); border-radius:13px; padding:11px; margin-bottom:8px; box-shadow:0 5px 16px rgba(20,20,50,.06); cursor:pointer; transition:transform .16s ease, box-shadow .16s ease; }
    .kanban-card:hover { transform:translateY(-1px); box-shadow:var(--soft-shadow); }
    .kanban-card strong { display:block; margin-bottom:6px; line-height:1.3; }
    .kanban-card .muted { font-size:12px; line-height:1.35; margin-bottom:8px; }
    .team-card-meta { font-size:11px; color:var(--muted); justify-content:space-between; gap:5px; }
    .priority-high { color:#dc4545; font-weight:700; }
    .priority-urgent { color:#b51f64; font-weight:800; }
    .kanban-add { width:100%; margin-top:8px; }
    @media (max-width: 760px) {
      .team-create-form { grid-template-columns:1fr 1fr; }
      .team-create-form .field:first-child, .team-create-form .field:nth-child(2) { grid-column:1 / -1; }
      .team-create-form button { width:100%; }
      .team-board-header { flex-direction:column; }
      .kanban-board { grid-template-columns:repeat(5,82vw); }
    }
    .hero {
      grid-column: span 7;
      min-height: 280px;
      display: grid;
      grid-template-columns: 1fr 160px;
      align-items: center;
      gap: 14px;
    }
    .hero h2 {
      margin: 0;
      font-size: clamp(26px, 3vw, 42px);
      line-height: 1.05;
      font-weight: 570;
    }
    .hero p {
      color: var(--muted);
      line-height: 1.5;
      margin: 14px 0 0;
    }
    .mascot-wrap {
      position: relative;
      width: 154px;
      max-width: 100%;
      justify-self: center;
      transform-origin: 54% 68%;
      animation: mascotHello 1.35s var(--ease) .25s 1 both, mascotFloat 4.8s ease-in-out 1.8s infinite;
      will-change: transform;
    }
    .mascot,
    .mascot-wave-arm {
      width: 154px;
      max-width: 100%;
      display: block;
      filter: drop-shadow(0 18px 25px var(--mist-medium));
    }
    .mascot {
      position: relative;
      z-index: 1;
    }
    .mascot-hand {
      display: none;
    }
    .mascot-wave-arm {
      position: absolute;
      inset: 0;
      z-index: 2;
      transform-origin: 22% 48%;
      animation: realMascotWave 1.08s ease-in-out .45s 6, realMascotIdle 5.2s ease-in-out 7s infinite;
      filter: drop-shadow(0 8px 12px var(--mist-medium));
      pointer-events: none;
    }
    .mascot-smile {
      position: absolute;
      left: 45%;
      top: 45%;
      width: 23px;
      height: 12px;
      border-bottom: 3px solid rgba(28, 19, 61, .78);
      border-radius: 0 0 999px 999px;
      transform: translateX(-50%);
      animation: smilePop 2.2s ease-in-out .5s infinite;
    }
    @keyframes realMascotWave {
      0%, 100% { transform: rotate(0deg); }
      18% { transform: rotate(-6deg); }
      38% { transform: rotate(7deg); }
      58% { transform: rotate(-5deg); }
      78% { transform: rotate(5deg); }
    }
    @keyframes realMascotIdle {
      0%, 88%, 100% { transform: rotate(0deg); }
      91% { transform: rotate(-4deg); }
      95% { transform: rotate(4deg); }
    }
    @keyframes smilePop {
      0%, 100% { opacity: .75; transform: translateX(-50%) scaleX(1); }
      50% { opacity: 1; transform: translateX(-50%) scaleX(1.12); }
    }
    @keyframes mascotHello {
      0% { transform: translateY(8px) rotate(0deg) scale(.98); opacity: 0; }
      18% { opacity: 1; }
      34% { transform: translateY(0) rotate(-5deg) scale(1.02); }
      52% { transform: translateY(-2px) rotate(5deg) scale(1.02); }
      70% { transform: translateY(0) rotate(-3deg) scale(1.01); }
      100% { transform: translateY(0) rotate(0deg) scale(1); opacity: 1; }
    }
    @keyframes mascotFloat {
      0%, 100% { transform: translateY(0) rotate(0deg); }
      50% { transform: translateY(-6px) rotate(-1deg); }
    }
    .weather {
      grid-column: span 5;
      min-height: 280px;
    }
    .big-number {
      font-size: 52px;
      font-weight: 560;
      margin: 6px 0;
    }
    .weather-location-form {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 8px;
      margin-top: 14px;
    }
    .weather-location-form input {
      min-width: 0;
      width: 100%;
    }
    .weather-actions {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin-top: 8px;
    }
    .muted {
      color: var(--muted);
    }
    .quick {
      grid-column: span 4;
    }
    .updates-card {
      grid-column: span 4;
    }
    .academy-links {
      display: grid;
      gap: 8px;
    }
    .academy-link, .update-action {
      min-height: 42px;
      border-radius: 15px;
      border: 1px solid var(--line);
      padding: 0 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      background: var(--panel-2);
      color: var(--ink);
      text-decoration: none;
      font-weight: 520;
      transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
    }
    .academy-link.primary-link {
      color: white;
      border-color: transparent;
      background: linear-gradient(135deg, var(--brand), color-mix(in srgb, var(--brand-2) 72%, var(--brand)));
      box-shadow: 0 12px 24px var(--mist-medium);
    }
    .update-action.update-idle {
      color: var(--ink);
      background: color-mix(in srgb, var(--panel-2) 88%, var(--panel-solid));
      border-color: var(--line);
      box-shadow: none;
    }
    .update-action.update-available {
      color: white;
      border-color: transparent;
      background: linear-gradient(135deg, #3177ff, color-mix(in srgb, var(--brand-2) 68%, #3177ff));
      box-shadow: 0 12px 24px rgba(49, 119, 255, .22);
    }
    .academy-link:hover, .update-action:hover {
      transform: translateY(-1px);
      box-shadow: var(--soft-shadow);
      background: color-mix(in srgb, var(--panel-solid) 68%, var(--panel-2));
    }
    .command-status {
      margin-top: 10px;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.35;
    }
    .setup-banner {
      margin: 12px 0 4px;
      padding: 12px 14px;
      border-radius: 14px;
      border: 1px solid color-mix(in srgb, var(--warn) 45%, transparent);
      background: color-mix(in srgb, var(--warn) 12%, transparent);
      color: var(--ink);
      font-size: 13px;
      line-height: 1.4;
    }
    .setup-banner[hidden] { display: none; }
    .quick-row > span {
      min-width: 0;
    }
    .quick-row > span:last-child {
      overflow-wrap: anywhere;
      text-align: right;
    }
    .account-box {
      display: grid;
      gap: 12px;
    }
    .account-state {
      border: 1px solid var(--line);
      border-radius: 18px;
      padding: 13px;
      background: color-mix(in srgb, var(--panel-2) 62%, transparent);
    }
    .account-state strong {
      display: block;
      font-size: 14px;
      font-weight: 560;
      margin-bottom: 4px;
    }
    .account-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }
    .login-box {
      display: none;
      border: 1px solid color-mix(in srgb, var(--brand) 38%, var(--line));
      border-radius: 18px;
      padding: 13px;
      background: color-mix(in srgb, var(--brand) 8%, var(--panel-2));
    }
    .login-box.active {
      display: grid;
      gap: 14px;
      position: fixed;
      z-index: 1001;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: min(92vw, 470px);
      max-height: 88vh;
      overflow: auto;
      padding: 22px;
      border-radius: 24px;
      background: var(--panel-solid);
      box-shadow: 0 0 0 100vmax rgba(8, 8, 16, .72), 0 28px 80px rgba(8, 8, 16, .42);
    }
    .login-box-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
    }
    .login-box-head strong {
      font-size: 18px;
    }
    .login-close {
      width: 36px;
      min-width: 36px;
      height: 36px;
      padding: 0;
      border-radius: 50%;
      font-size: 20px;
    }
    .login-steps {
      margin: 0;
      padding-left: 22px;
      color: var(--muted);
    }
    .login-steps li {
      margin: 6px 0;
    }
    .login-box .primary-link {
      width: 100%;
      min-height: 50px;
      justify-content: center;
      font-size: 15px;
    }
    .login-code {
      display: inline-flex;
      width: 100%;
      max-width: 100%;
      border-radius: 12px;
      padding: 14px;
      background: color-mix(in srgb, var(--panel-solid) 88%, transparent);
      border: 1px solid var(--line);
      font-size: 21px;
      font-weight: 650;
      letter-spacing: .1em;
      overflow-wrap: anywhere;
      justify-content: center;
      text-align: center;
    }
    .account-actions .primary,
    .account-actions .ghost {
      flex: 1 1 150px;
      min-width: 0;
      text-align: center;
    }
    .account-list-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 8px;
    }
    .account-list-head h3 { margin: 0; }
    .user-account-list {
      display: grid;
      gap: 10px;
      margin-top: 16px;
    }
    .user-account-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 14px;
      align-items: center;
      padding: 14px;
      border: 1px solid var(--line);
      border-radius: 17px;
      background: color-mix(in srgb, var(--panel-2) 62%, transparent);
    }
    .user-account-name {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 7px;
      margin-bottom: 5px;
    }
    .user-account-meta {
      color: var(--muted);
      font-size: 12px;
      line-height: 1.5;
    }
    .status-badge {
      display: inline-flex;
      align-items: center;
      min-height: 24px;
      padding: 0 9px;
      border-radius: 999px;
      background: color-mix(in srgb, var(--good) 14%, transparent);
      color: var(--good);
      font-size: 11px;
      font-weight: 650;
    }
    .status-badge.inactive {
      background: color-mix(in srgb, var(--muted) 14%, transparent);
      color: var(--muted);
    }
    .privacy-note {
      margin: 14px 0 0;
      padding: 12px 14px;
      border: 1px solid color-mix(in srgb, var(--good) 30%, var(--line));
      border-radius: 15px;
      background: color-mix(in srgb, var(--good) 8%, transparent);
      color: var(--ink);
      font-size: 13px;
      line-height: 1.5;
    }
    .settings-details {
      margin-top: 14px;
      border-top: 1px solid var(--line);
      padding-top: 10px;
    }
    .settings-details summary {
      color: var(--muted);
      cursor: pointer;
      font-size: 13px;
      font-weight: 600;
    }
    .settings-details[open] summary { margin-bottom: 8px; }
    .quick h3, .panel h3 {
      margin: 0 0 12px;
      font-size: 15px;
      font-weight: 560;
    }
    .quick-row, .file-row, .event-row, .archive-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      min-height: 44px;
      border-top: 1px solid var(--line);
      padding: 10px 0;
    }
    .quick-row:first-of-type, .file-row:first-of-type, .event-row:first-of-type, .archive-row:first-of-type {
      border-top: 0;
    }
    .quick-command {
      width: 100%;
      border-top: 1px solid var(--line);
      border-radius: 14px;
      min-height: 44px;
      padding: 0 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      background: transparent;
      color: var(--ink);
      text-align: left;
      transition: background .2s var(--ease), transform .2s var(--ease);
    }
    .quick-command:first-of-type {
      border-top: 0;
    }
    .quick-command:hover {
      background: color-mix(in srgb, var(--panel-2) 72%, transparent);
      transform: translateX(2px);
    }
    .quick-command code {
      font: inherit;
      font-weight: 560;
    }
    .quick-command span:last-child {
      color: var(--muted);
      font-weight: 470;
    }
    .tag {
      color: white;
      background: linear-gradient(135deg, var(--brand-2), color-mix(in srgb, var(--brand) 58%, var(--brand-2)));
      border-radius: 999px;
      padding: 4px 9px;
      font-size: 12px;
      white-space: nowrap;
    }
    .space-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 96px 82px 54px;
      align-items: center;
      column-gap: 8px;
      width: 100%;
    }
    .space-edit {
      width: 96px;
      min-height: 38px;
      justify-content: center;
      padding: 0 12px;
    }
    .space-delete {
      width: 82px;
      min-height: 38px;
      justify-content: center;
      padding: 0 10px;
      color: var(--danger);
      background: color-mix(in srgb, var(--danger) 8%, var(--panel-2));
      border-color: color-mix(in srgb, var(--danger) 22%, var(--line));
    }
    .space-status {
      width: 54px;
      justify-self: end;
      text-align: center;
      padding-inline: 0;
    }
    .chat-shell {
      height: calc(100vh - 116px);
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(260px, 300px);
      gap: 12px;
    }
    .chat-panel {
      position: relative;
      display: grid;
      grid-template-rows: 1fr auto;
      min-height: 0;
      padding: 0;
      overflow: hidden;
      isolation: isolate;
      background-image: var(--chat-bg-image);
      background-size: var(--chat-bg-size);
      background-position: var(--chat-bg-position);
      background-repeat: var(--chat-bg-repeat);
    }
    .chat-panel::before {
      content: "";
      pointer-events: none;
      position: absolute;
      inset: 0;
      background: var(--chat-bg-overlay);
      z-index: 0;
    }
    .chat-panel > * {
      position: relative;
      z-index: 1;
    }
    .chat-side {
      padding: 12px;
      overflow: auto;
    }
    .side-tools {
      display: grid;
      gap: 8px;
    }
    .tool-group {
      border: 1px solid var(--line);
      border-radius: 16px;
      background: color-mix(in srgb, var(--panel-2) 54%, transparent);
      overflow: hidden;
    }
    .tool-group summary {
      min-height: 38px;
      padding: 0 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      cursor: pointer;
      color: var(--ink);
      font-size: 13px;
      font-weight: 520;
      list-style: none;
    }
    .tool-group summary::-webkit-details-marker {
      display: none;
    }
    .tool-group summary::after {
      content: "+";
      color: var(--muted);
      font-size: 16px;
      line-height: 1;
    }
    .tool-group[open] summary::after {
      content: "–";
    }
    .tool-group-body {
      display: grid;
      gap: 7px;
      padding: 0 8px 9px;
    }
    .tool-group .field {
      margin-bottom: 3px;
    }
    .tool-group .ghost,
    .tool-group .quick-command {
      min-height: 34px;
      border-radius: 12px;
      padding: 0 10px;
      font-size: 13px;
    }
    .tool-group .quick-command {
      border-top: 0;
      background: color-mix(in srgb, var(--panel-solid) 22%, transparent);
    }
    .tool-group .command-status {
      margin: 2px 2px 0;
      font-size: 12px;
    }
    #messages {
      position: relative;
      min-height: 0;
      overflow: auto;
      padding: 18px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      background: linear-gradient(180deg, color-mix(in srgb, var(--panel-2) 18%, transparent), transparent 54%);
    }
    #messages::before {
      display: none;
    }
    #messages > * {
      position: relative;
      z-index: 1;
    }
    .bubble {
      position: relative;
      max-width: min(760px, 84%);
      padding: 14px 16px;
      border-radius: 24px;
      line-height: 1.45;
      white-space: pre-wrap;
      word-break: break-word;
      animation: bubbleIn .24s var(--ease);
      box-shadow: 0 5px 20px rgba(31, 37, 56, .06);
    }
    .provider-note {
      margin-top: 10px;
      padding-top: 8px;
      border-top: 1px solid rgba(31, 37, 56, .10);
      font-size: 12px;
      letter-spacing: .01em;
      opacity: .62;
      white-space: normal;
    }
    .delete-message {
      position: absolute;
      top: -8px;
      right: -8px;
      width: 28px;
      height: 28px;
      border-radius: 50%;
      display: none;
      align-items: center;
      justify-content: center;
      background: color-mix(in srgb, var(--danger) 85%, black);
      color: white;
      box-shadow: var(--soft-shadow);
      font-weight: 600;
    }
    .bubble:hover .delete-message {
      display: flex;
    }
    .message-actions {
      display: none;
      gap: 6px;
      margin-top: 10px;
      flex-wrap: wrap;
    }
    .bubble:hover .message-actions,
    .bubble:focus-within .message-actions {
      display: flex;
    }
    .message-action {
      min-height: 28px;
      border-radius: 999px;
      padding: 0 10px;
      font-size: 12px;
      font-weight: 520;
      color: var(--muted);
      background: color-mix(in srgb, var(--panel-2) 72%, transparent);
      border: 1px solid color-mix(in srgb, var(--line) 76%, transparent);
    }
    @keyframes bubbleIn {
      from { opacity: 0; transform: translateY(6px) scale(.985); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }
    .typing-bubble {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      color: var(--muted);
      white-space: normal;
      width: auto;
      min-width: 58px;
      padding: 12px 15px;
    }
    .typing-label {
      color: var(--muted);
      font-size: 14px;
      font-weight: 520;
    }
    .typing-dots {
      display: inline-flex;
      gap: 5px;
      align-items: center;
    }
    .typing-dots span {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--brand);
      animation: typingPulse 1.1s infinite ease-in-out;
      opacity: .35;
    }
    .typing-dots span:nth-child(2) { animation-delay: .15s; }
    .typing-dots span:nth-child(3) { animation-delay: .30s; }
    @keyframes typingPulse {
      0%, 80%, 100% { transform: translateY(0); opacity: .35; }
      40% { transform: translateY(-4px); opacity: 1; }
    }
    .attachment-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
      gap: 8px;
      margin-top: 8px;
      white-space: normal;
    }
    .attachment-grid.image-only {
      display: block;
      margin-top: 10px;
    }
    .attachment-card {
      display: grid;
      gap: 5px;
      max-width: 320px;
      min-height: 126px;
      border: 1px solid var(--line);
      border-radius: 14px;
      padding: 7px;
      background: color-mix(in srgb, var(--panel) 82%, transparent);
      color: var(--ink);
      text-decoration: none;
    }
    .attachment-card.image-only {
      display: block;
      max-width: min(100%, 520px);
      min-height: 0;
      border: 0;
      border-radius: 0;
      padding: 0;
      background: transparent;
    }
    .attachment-card img {
      width: 100%;
      height: 96px;
      object-fit: contain;
      border-radius: 9px;
      background: color-mix(in srgb, var(--panel-2) 72%, transparent);
    }
    .attachment-card.image-only img {
      display: block;
      height: auto;
      max-height: 360px;
      object-fit: contain;
      border-radius: 10px;
      background: transparent;
    }
    .attachment-card.image-only img.image-load-error {
      min-height: 180px;
      background: color-mix(in srgb, var(--panel-2) 72%, transparent);
    }
    .attachment-card embed {
      width: min(320px, 100%);
      height: 104px;
      border: 0;
      border-radius: 9px;
      background: color-mix(in srgb, var(--panel-2) 72%, transparent);
    }
    .attachment-card iframe {
      width: min(360px, 100%);
      height: 126px;
      border: 0;
      border-radius: 9px;
      background: white;
      pointer-events: none;
    }
    .attachment-card.website-preview {
      max-width: min(380px, 100%);
    }
    .attachment-name {
      font-size: 12px;
      color: var(--muted);
      overflow-wrap: anywhere;
    }
    .attachment-action {
      color: var(--brand);
      font-size: 12px;
      font-weight: 520;
    }
    .doc-preview {
      height: 104px;
      border-radius: 10px;
      display: grid;
      place-items: center;
      background: linear-gradient(145deg, color-mix(in srgb, var(--panel-2) 70%, white), color-mix(in srgb, var(--panel) 82%, var(--brand-2)));
      border: 1px solid var(--line);
      font-size: 42px;
    }
    .archive-tools {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 10px;
      align-items: center;
      margin-bottom: 12px;
    }
    .archive-row {
      cursor: pointer;
      border-radius: 16px;
      padding-inline: 10px;
      transition: background .2s var(--ease), transform .2s var(--ease);
    }
    .archive-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 82px 34px;
      align-items: center;
      gap: 10px;
    }
    .archive-delete {
      min-width: 34px;
      height: 34px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: color-mix(in srgb, var(--danger) 12%, var(--panel-2));
      color: var(--danger);
      font-weight: 560;
    }
    .archive-row:hover {
      background: color-mix(in srgb, var(--panel-2) 72%, transparent);
      transform: translateX(2px);
    }
    .archive-main {
      min-width: 0;
    }
    .archive-preview {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      max-width: 100%;
    }
    .archive-date {
      color: var(--muted);
      white-space: nowrap;
      font-weight: 470;
      font-size: 13px;
      text-align: right;
    }
    .chat-link {
      color: var(--brand);
      font-weight: 560;
      text-decoration: underline;
      text-underline-offset: 3px;
      overflow-wrap: anywhere;
    }
    .rich-text-line { margin: 0 0 8px; white-space: pre-wrap; }
    .rich-heading { margin: 12px 0 7px; line-height: 1.25; font-weight: 650; }
    .rich-heading.level-1 { font-size: 1.25em; }
    .rich-heading.level-2 { font-size: 1.14em; }
    .rich-list-item { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 3px; margin: 4px 0; }
    .rich-list-marker { color: var(--brand); font-weight: 650; }
    .rich-code-block {
      margin: 10px 0;
      padding: 12px;
      border-radius: 12px;
      overflow: auto;
      white-space: pre;
      background: color-mix(in srgb, var(--panel-solid) 82%, #080a12);
      border: 1px solid var(--line);
      font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    }
    .rich-inline-code {
      padding: 2px 5px;
      border-radius: 6px;
      background: color-mix(in srgb, var(--panel-2) 76%, transparent);
      font: .92em ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    }
    .chat-link-preview {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      width: min(100%, 380px);
      margin: 8px 0;
      padding: 10px 12px;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: color-mix(in srgb, var(--panel) 86%, transparent);
      color: var(--ink);
      text-decoration: none;
      white-space: normal;
    }
    .chat-link-preview small { color: var(--muted); overflow-wrap: anywhere; }
    .chat-link-preview span:last-child { color: var(--brand); font-size: 12px; white-space: nowrap; }
    .compact-view .archive-row,
    .compact-view .event-row,
    .compact-view .quick-row,
    .compact-view .file-row {
      min-height: 36px;
      padding: 7px 8px;
      border-radius: 12px;
      font-size: 13px;
    }
    .compact-view .archive-preview,
    .compact-view .archive-date,
    .compact-view .file-date {
      font-size: 12px;
    }
    .file-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(154px, 1fr));
      gap: 10px;
    }
    .file-card {
      min-height: 172px;
      border: 1px solid var(--line);
      border-radius: 16px;
      padding: 8px;
      background: color-mix(in srgb, var(--panel) 82%, transparent);
      display: grid;
      grid-template-rows: 124px auto;
      gap: 7px;
      text-decoration: none;
      color: var(--ink);
      overflow: hidden;
    }
    .file-thumb {
      width: 100%;
      height: 124px;
      border-radius: 11px;
      border: 1px solid var(--line);
      background: color-mix(in srgb, var(--panel-2) 80%, transparent);
      display: grid;
      place-items: center;
      font-size: 38px;
      overflow: hidden;
    }
    .file-thumb img, .file-thumb embed {
      width: 100%;
      height: 100%;
      border: 0;
      object-fit: cover;
      background: color-mix(in srgb, var(--panel-2) 76%, transparent);
    }
    .file-date {
      min-width: 0;
      color: var(--muted);
      font-size: 13px;
      font-weight: 470;
      text-align: center;
    }
    .compact-view .file-grid {
      grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
      gap: 8px;
    }
    .compact-view .file-card {
      min-height: 128px;
      grid-template-rows: 84px auto;
      border-radius: 14px;
      padding: 6px;
      gap: 5px;
    }
    .compact-view .file-thumb {
      height: 84px;
      border-radius: 10px;
      font-size: 30px;
    }
    .chat-attach-row {
      display: none;
      flex-wrap: wrap;
      gap: 7px;
      padding: 0 12px 12px;
      border-top: 1px solid var(--line);
    }
    .design-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: 12px;
      margin-top: 12px;
    }
    .background-choice {
      border: 1px solid var(--line);
      border-radius: 16px;
      padding: 10px;
      min-height: 138px;
      display: grid;
      gap: 8px;
      text-align: left;
      background: color-mix(in srgb, var(--panel-2) 70%, transparent);
    }
    .background-choice.active {
      border-color: color-mix(in srgb, var(--brand) 72%, var(--line));
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 16%, transparent);
    }
    .background-preview {
      height: 82px;
      border-radius: 12px;
      border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
      background: var(--preview-bg, linear-gradient(135deg, var(--panel-solid), var(--panel-2)));
      background-size: cover;
      background-position: center;
    }
    .background-choice strong {
      font-size: 13px;
      font-weight: 560;
    }
    .background-choice span {
      color: var(--muted);
      font-size: 12px;
    }
    .design-panel .design-grid {
      grid-template-columns: repeat(auto-fill, minmax(122px, 1fr));
      gap: 8px;
      max-height: 324px;
      overflow: auto;
      padding-right: 2px;
    }
    .design-panel .background-choice {
      min-height: 100px;
      border-radius: 14px;
      padding: 8px;
      gap: 6px;
    }
    .design-panel .background-preview {
      height: 54px;
      border-radius: 10px;
    }
    .design-panel .background-choice strong {
      font-size: 12px;
    }
    .design-panel .background-choice span {
      display: none;
    }
    .color-grid,
    .mist-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(42px, 1fr));
      gap: 10px;
      margin-top: 12px;
    }
    .color-choice,
    .mist-choice {
      width: 42px;
      min-width: 42px;
      height: 42px;
      min-height: 42px;
      border-radius: 50%;
      padding: 0;
      border: 2px solid color-mix(in srgb, var(--line) 80%, transparent);
      background: linear-gradient(135deg, var(--swatch-a), var(--swatch-b));
      box-shadow: inset 0 0 0 3px color-mix(in srgb, white 18%, transparent);
    }
    .mist-choice {
      position: relative;
      background:
        radial-gradient(circle at 50% 50%, var(--mist-preview-strong), var(--mist-preview-soft) 48%, transparent 72%),
        color-mix(in srgb, var(--panel-2) 84%, transparent);
    }
    .mist-choice[data-mist-id="none"]::before {
      content: "";
      position: absolute;
      left: 9px;
      right: 9px;
      top: 20px;
      height: 2px;
      border-radius: 999px;
      background: var(--danger);
      transform: rotate(-38deg);
    }
    .color-choice.active {
      border-color: var(--ink);
      box-shadow: 0 0 0 4px color-mix(in srgb, var(--swatch-a) 24%, transparent), inset 0 0 0 3px color-mix(in srgb, white 18%, transparent);
    }
    .mist-choice.active {
      border-color: var(--ink);
      box-shadow: 0 0 0 4px var(--mist-preview-soft), inset 0 0 0 3px color-mix(in srgb, white 18%, transparent);
    }
    .file-chip {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      max-width: 100%;
      border: 1px solid var(--line);
      border-radius: 999px;
      padding: 6px 9px;
      background: var(--panel-2);
      color: var(--muted);
      font-size: 13px;
    }
    .calendar-toolbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 12px;
    }
    .calendar-toolbar h3 {
      margin: 0;
      font-size: 17px;
    }
    .calendar-grid {
      display: grid;
      grid-template-columns: repeat(7, minmax(0, 1fr));
      gap: 6px;
    }
    .calendar-weekday {
      color: var(--muted);
      font-size: 12px;
      font-weight: 520;
      text-align: center;
      padding: 7px 0;
    }
    .calendar-day {
      min-height: 92px;
      border: 1px solid var(--line);
      border-radius: 18px;
      padding: 8px;
      background: color-mix(in srgb, var(--panel) 82%, transparent);
      display: grid;
      align-content: start;
      gap: 6px;
      cursor: pointer;
      transition: transform .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease);
    }
    .calendar-day:hover {
      transform: translateY(-2px);
      border-color: color-mix(in srgb, var(--brand) 55%, var(--line));
      background: color-mix(in srgb, var(--panel-solid) 70%, var(--panel-2));
    }
    .calendar-day.outside {
      opacity: .42;
    }
    .calendar-day.today {
      outline: 2px solid color-mix(in srgb, var(--brand) 70%, transparent);
    }
    .calendar-day.selected {
      outline: 2px solid color-mix(in srgb, var(--brand) 86%, transparent);
      box-shadow: 0 12px 26px var(--mist-soft);
    }
    .calendar-date {
      font-size: 13px;
      font-weight: 520;
    }
    .calendar-event {
      border-radius: 11px;
      padding: 5px 7px;
      background: color-mix(in srgb, var(--brand) 15%, var(--panel-2));
      color: var(--ink);
      font-size: 12px;
      line-height: 1.25;
      overflow-wrap: anywhere;
    }
    .calendar-owner-note {
      margin: -4px 0 14px;
      color: var(--muted);
      font-size: 13px;
    }
    .calendar-filters {
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
      margin: 0 0 14px;
    }
    .calendar-filter {
      min-height: 34px;
      border: 1px solid var(--line);
      border-radius: 999px;
      padding: 0 11px;
      color: var(--muted);
      background: var(--panel-2);
      font-size: 12px;
    }
    .calendar-filter.active {
      color: white;
      border-color: transparent;
      background: var(--calendar-color, var(--brand));
    }
    .calendar-dot {
      display: inline-block;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      margin-right: 6px;
      background: var(--calendar-color, var(--brand));
    }
    .event-row {
      gap: 12px;
    }
    .event-row-main {
      min-width: 0;
      flex: 1;
    }
    .event-row-actions {
      display: flex;
      align-items: center;
      gap: 8px;
      white-space: nowrap;
    }
    .event-delete {
      min-width: 34px;
      min-height: 34px;
      padding: 0 9px;
    }
    .compact-view .calendar-grid {
      gap: 5px;
    }
    .compact-view .calendar-weekday {
      padding: 4px 0;
      font-size: 11px;
    }
    .compact-view .calendar-day {
      min-height: 64px;
      border-radius: 13px;
      padding: 6px;
      gap: 4px;
    }
    .compact-view .calendar-date {
      font-size: 12px;
    }
    .compact-view .calendar-event {
      border-radius: 8px;
      padding: 3px 5px;
      font-size: 11px;
      line-height: 1.2;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .reminder-card {
      margin-top: 14px;
      border: 1px solid color-mix(in srgb, var(--brand) 38%, var(--line));
      border-radius: 18px;
      padding: 12px;
      background: color-mix(in srgb, var(--brand) 10%, var(--panel));
      color: var(--ink);
      line-height: 1.35;
    }
    .assistant {
      align-self: flex-start;
      background: var(--panel-2);
      border-bottom-left-radius: 8px;
      border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
    }
    .user {
      align-self: flex-end;
      background: linear-gradient(135deg, var(--brand), color-mix(in srgb, var(--brand-2) 62%, var(--brand)));
      color: white;
      border-bottom-right-radius: 8px;
    }
    .composer {
      border-top: 1px solid var(--line);
      padding: 12px;
      display: grid;
      /* Drei Bereiche: Werkzeuge, Textfeld, Senden. Frueher wuchs die
         Spaltenzahl mit jedem Knopf — beim fuenften rutschte "Senden" in
         eine zweite Zeile und die Leiste sah gebrochen aus. */
      grid-template-columns: auto minmax(0, 1fr) auto;
      gap: 10px;
      align-items: flex-end;
      background: color-mix(in srgb, var(--panel-solid) 64%, transparent);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
    }
    .composer button {
      flex: 0 0 auto;
    }
    .composer-tools {
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .composer-menu {
      position: relative;
    }
    .composer-menu > summary {
      list-style: none;
      cursor: pointer;
      display: grid;
      place-items: center;
      min-width: 44px;
      min-height: 44px;
      border-radius: 999px;
      border: 1px solid var(--line);
      color: var(--muted);
      user-select: none;
    }
    .composer-menu > summary::-webkit-details-marker { display: none; }
    .composer-menu[open] > summary { background: var(--panel-2); color: var(--ink); }
    .composer-menu-body {
      position: absolute;
      bottom: calc(100% + 8px);
      left: 0;
      z-index: 40;
      width: 280px;
      max-width: 78vw;
      padding: 14px;
      border-radius: 18px;
      border: 1px solid var(--line);
      background: var(--panel-solid);
      box-shadow: var(--shadow);
      display: grid;
      gap: 12px;
    }
    .composer-menu-body label {
      display: block;
      color: var(--muted);
      font-size: 12px;
      font-weight: 650;
      margin-bottom: 5px;
    }
    .composer-menu-body select { width: 100%; }
    .composer-menu-row {
      display: flex;
      gap: 8px;
    }
    .composer-menu-row button { flex: 1; }
    .secret-field {
      -webkit-text-security: disc;
      text-security: disc;
      font-family: inherit;
    }
    .secret-field:placeholder-shown {
      -webkit-text-security: none;
      text-security: none;
    }
    .model-access {
      margin-top: 12px;
      border-top: 1px solid var(--line);
      padding-top: 10px;
    }
    .model-access > summary {
      cursor: pointer;
      font-size: 13px;
      font-weight: 650;
      color: var(--brand);
      list-style: none;
    }
    .model-access > summary::-webkit-details-marker { display: none; }
    .model-access > summary::before { content: "+ "; }
    .model-access[open] > summary::before { content: "− "; }
    .model-access-body { display: grid; gap: 10px; margin-top: 12px; }
    .model-access-body p { margin: 0; font-size: 12px; line-height: 1.5; }
    .model-access-toggle {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 13px;
      /* In der schmalen Seitenleiste verschwand die Beschriftung neben dem
         Haken. flex-wrap und min-width:0 lassen den Text umbrechen, statt ihn
         abzuschneiden. */
      flex-wrap: wrap;
      min-width: 0;
      word-break: break-word;
    }
    .model-access-actions { display: flex; gap: 8px; }
    .model-access-actions button { flex: 1; }
    .tool-group-divider {
      margin-top: 6px;
      padding-top: 10px;
      border-top: 1px solid var(--line);
      color: var(--muted);
      font-size: 12px;
      font-weight: 650;
    }
    .chat-status-line {
      display: flex;
      align-items: baseline;
      gap: 8px;
      font-size: 12px;
    }
    .chat-status-line .muted { font-weight: 650; }
    @media (max-width: 1200px) {
      .chat-shell { grid-template-columns: minmax(0, 1fr) 280px; }
    }
    .model-access-body .field { min-width: 0; }
    .model-access-body input,
    .model-access-body select {
      width: 100%;
      min-width: 0;
      box-sizing: border-box;
    }
    .model-access-toggle {
      align-items: flex-start;
      line-height: 1.4;
    }
    .model-access-toggle input { margin-top: 2px; flex: 0 0 auto; }
    .model-access-actions { flex-wrap: wrap; }
    .model-access-actions button { flex: 1 1 120px; white-space: normal; }
    .chat-skill-bar {
      grid-column: 1 / -1;
      display: flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
    }
    .chat-skill-bar label {
      color: var(--muted);
      font-size: 12px;
      font-weight: 650;
      white-space: nowrap;
    }
    .chat-skill-select {
      min-height: 34px;
      width: min(100%, 310px);
      padding: 5px 34px 5px 10px;
      border-radius: 12px;
      font-size: 13px;
    }
    .voice-controls {
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .voice-language {
      width: 62px;
      min-width: 62px;
      min-height: 42px;
      padding: 0 7px;
      border-radius: 16px;
      border: 1px solid var(--line);
      background: color-mix(in srgb, var(--panel-solid) 90%, transparent);
      color: var(--ink);
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
    }
    .voice-output.active {
      border-color: color-mix(in srgb, var(--brand) 55%, var(--line));
      background: color-mix(in srgb, var(--brand) 14%, var(--panel-2));
      color: var(--brand);
    }
    .voice-status {
      min-height: 0;
      margin: 0 10px 6px;
      font-size: 11px;
    }
    .voice-status:empty { display:none; }
    .speaker-icon {
      width: 19px;
      height: 19px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .reply-draft {
      grid-column: 1 / -1;
      display: none;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 9px 10px;
      border-radius: 14px;
      border: 1px solid color-mix(in srgb, var(--brand) 28%, var(--line));
      background: color-mix(in srgb, var(--brand) 9%, var(--panel-solid));
      color: var(--muted);
      font-size: 13px;
      line-height: 1.3;
    }
    .reply-draft strong {
      color: var(--ink);
      font-weight: 560;
    }
    .reply-draft button {
      width: 28px;
      min-width: 28px;
      min-height: 28px;
      border-radius: 50%;
      padding: 0;
      background: color-mix(in srgb, var(--panel-2) 78%, transparent);
    }
    .mic-icon {
      width: 20px;
      height: 20px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    #voiceBtn.recording {
      border-color: color-mix(in srgb, var(--danger) 55%, var(--line));
      background: color-mix(in srgb, var(--danger) 14%, var(--panel-2));
      color: var(--danger);
      box-shadow: 0 0 0 4px color-mix(in srgb, var(--danger) 13%, transparent);
    }
    #voiceBtn.recording::after {
      content: "";
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: currentColor;
      margin-left: -6px;
      margin-top: -18px;
      animation: pulse 1s infinite;
    }
    @keyframes pulse {
      0%, 100% { opacity: .35; transform: scale(.82); }
      50% { opacity: 1; transform: scale(1); }
    }
    textarea {
      flex: 1;
      min-width: 0;
      min-height: 46px;
      max-height: 140px;
      resize: vertical;
      border: 1px solid var(--line);
      border-radius: 22px;
      padding: 12px 13px;
      background: color-mix(in srgb, var(--panel-solid) 78%, var(--bg));
      color: var(--ink);
      outline: none;
      transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
    }
    textarea:focus, input:focus, select:focus {
      border-color: color-mix(in srgb, var(--brand) 64%, var(--line));
      box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 14%, transparent);
    }
    .primary {
      justify-content: center;
      background: linear-gradient(135deg, var(--brand), color-mix(in srgb, var(--brand-2) 68%, var(--brand)));
      color: white;
      min-width: 46px;
      font-weight: 520;
      box-shadow: 0 12px 26px var(--mist-medium);
    }
    .primary:hover {
      transform: translateY(-1px);
      box-shadow: 0 16px 32px var(--mist-strong);
    }
    .primary:active, .ghost:active, .icon-btn:active, .nav-btn:active {
      transform: scale(.98);
    }
    .ghost {
      justify-content: center;
      background: var(--panel-2);
      border: 1px solid var(--line);
    }
    .field {
      display: grid;
      gap: 6px;
      margin-bottom: 12px;
    }
    .pairing-code-entry {
      padding: 14px;
      margin-bottom: 12px;
      border: 1px solid color-mix(in srgb, var(--brand) 34%, var(--line));
      border-radius: 16px;
      background: color-mix(in srgb, var(--brand) 7%, var(--panel-2));
    }
    .pairing-code-entry label {
      display: block;
      margin-bottom: 7px;
      font-weight: 560;
    }
    .pairing-code-entry input {
      font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
      letter-spacing: .04em;
      text-align: center;
      text-transform: none;
    }
    .pairing-code-entry .primary {
      width: 100%;
      margin-top: 9px;
    }
    .pairing-code-status {
      min-height: 18px;
      margin-top: 8px;
      color: var(--muted);
      font-size: 12px;
      text-align: center;
    }
    .recovery-panel {
      grid-column: 1 / -1;
      border-color: color-mix(in srgb, var(--brand) 28%, var(--line));
      background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 7%, var(--panel-solid)), var(--panel-solid));
    }
    .recovery-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 14px;
      margin-bottom: 12px;
    }
    .recovery-head p { margin: 3px 0 0; }
    .recovery-status-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
      margin-bottom: 12px;
    }
    .recovery-state {
      display: grid;
      gap: 4px;
      padding: 10px 12px;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: color-mix(in srgb, var(--panel-solid) 86%, transparent);
    }
    .recovery-state span { color: var(--muted); font-size: 11px; }
    .recovery-state strong { font-size: 13px; font-weight: 560; }
    .recovery-state strong[data-ok="true"] { color: var(--good); }
    .recovery-state strong[data-ok="false"] { color: var(--danger); }
    .recovery-actions {
      display: grid;
      grid-template-columns: minmax(180px, 1fr) repeat(2, minmax(130px, .6fr));
      gap: 8px;
    }
    .recovery-message {
      min-height: 20px;
      margin-top: 10px;
      color: var(--muted);
      font-size: 12px;
    }
    .artifact-preview-modal {
      position: fixed;
      inset: 0;
      z-index: 5000;
      display: none;
      grid-template-rows: auto minmax(0, 1fr);
      background: var(--bg);
    }
    .artifact-preview-modal.active { display: grid; }
    .artifact-preview-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      min-height: 58px;
      padding: 8px 62px 8px 12px;
      border-bottom: 1px solid var(--line);
      background: var(--panel-solid);
    }
    .artifact-preview-head strong {
      flex: 1 1 auto;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-weight: 560;
    }
    .artifact-preview-head button {
      position: fixed;
      top: max(8px, env(safe-area-inset-top));
      right: 8px;
      z-index: 5001;
      width: 42px !important;
      max-width: 42px;
      min-width: 42px;
      min-height: 42px;
      padding: 0;
      border-radius: 50%;
      font-size: 21px;
    }
    .artifact-preview-frame {
      width: 100%;
      height: 100%;
      border: 0;
      background: white;
    }
    label {
      color: var(--muted);
      font-size: 13px;
    }
    input, select {
      width: 100%;
      border: 1px solid var(--line);
      border-radius: 18px;
      padding: 11px 12px;
      background: color-mix(in srgb, var(--panel-solid) 78%, var(--bg));
      color: var(--ink);
      outline: none;
    }
    .two-col {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 16px;
    }
    .compact-view .panel {
      padding: 12px;
      border-radius: 20px;
      box-shadow: 0 14px 36px rgba(31, 37, 56, .08);
    }
    .compact-view .panel h3 {
      margin-bottom: 8px;
      font-size: 14px;
    }
    .compact-layout {
      gap: 12px;
      align-items: start;
    }
    .archive-layout {
      grid-template-columns: minmax(260px, .9fr) minmax(220px, .65fr) minmax(320px, 1.1fr);
    }
    .spaces-layout {
      grid-template-columns: minmax(240px, .72fr) minmax(360px, 1.28fr);
    }
    .calendar-layout {
      grid-template-columns: minmax(230px, .52fr) minmax(460px, 1.48fr);
    }
    .settings-layout {
      grid-template-columns: minmax(0, 1fr);
      gap: 10px;
    }
    .settings-layout .settings-section-heading,
    .settings-layout .panel {
      grid-column: 1 / -1;
    }
    #onboardingForm {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0 12px;
      align-items: start;
    }
    #onboardingForm > .field:nth-child(3),
    #onboardingForm > .field:nth-child(6),
    #onboardingForm > .field:nth-child(7),
    #onboardingForm > div:last-child {
      grid-column: 1 / -1;
    }
    #onboardingForm > div:last-child {
      margin-top: 2px;
    }
    .compact-view .field {
      gap: 5px;
      margin-bottom: 9px;
    }
    .compact-view input,
    .compact-view select {
      min-height: 40px;
      border-radius: 14px;
      padding-block: 9px;
    }
    .compact-view .primary,
    .compact-view .ghost {
      min-height: 38px;
      border-radius: 14px;
      padding-inline: 12px;
    }
    .full { grid-column: 1 / -1; }
    .empty {
      color: var(--muted);
      padding: 18px 0;
      line-height: 1.45;
    }
    video {
      width: 100%;
      border-radius: 14px;
      background: #000;
      display: none;
    }
    @media (max-width: 920px) {
      .app { grid-template-columns: 1fr; }
      aside {
        position: sticky;
        top: 0;
        z-index: 3;
        border-right: 0;
        border-bottom: 1px solid var(--line);
        padding: 12px;
      }
      nav {
        display: flex;
        overflow-x: auto;
      }
      .nav-btn {
        flex: 0 0 auto;
      }
      .side-section, .status-pill {
        display: none;
      }
      main { grid-template-rows: 64px 1fr; }
      header { padding: 0 14px; }
      .content { padding: 14px; }
      .grid { grid-template-columns: 1fr; }
      .hero, .weather, .quick { grid-column: auto; }
      .hero { grid-template-columns: 1fr 110px; min-height: 220px; }
      .mascot { width: 110px; }
      .chat-shell { height: calc(100vh - 144px); grid-template-columns: 1fr; }
      .chat-side { display: none; }
      .two-col { grid-template-columns: 1fr; }
      .calendar-day { min-height: 76px; padding: 6px; }
    }
    @media (max-width: 720px) {
      :root {
        --radius: 18px;
      }
      body {
        min-height: 100dvh;
        overflow: hidden;
        overflow-x: hidden;
        width: 100%;
      }
      .app {
        min-height: 100dvh;
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
      }
      aside {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        top: auto;
        z-index: 30;
        min-height: calc(58px + env(safe-area-inset-bottom));
        padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
        border-top: 1px solid var(--line);
        border-bottom: 0;
        background: color-mix(in srgb, var(--panel-solid) 88%, transparent);
        box-shadow: 0 -10px 34px rgba(31, 37, 56, .12);
      }
      .brand,
      .side-section,
      .status-pill {
        display: none;
      }
      nav {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 5px;
        overflow: visible;
        width: 100%;
        max-width: 100%;
        scrollbar-width: none;
      }
      .nav-more {
        display: none;
      }
      .nav-spaces,
      nav [data-view="settings"],
      nav .nav-extra {
        display: none;
      }
      nav [data-view="files"] {
        display: flex;
      }
      nav::-webkit-scrollbar {
        display: none;
      }
      .nav-btn {
        min-height: 46px;
        border-radius: 14px;
        padding: 0 4px;
        justify-content: center;
        font-size: 11px;
        width: 100%;
        min-width: 0;
        white-space: nowrap;
      }
      .nav-label {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .nav-btn.active {
        box-shadow: 0 8px 18px var(--mist-medium);
      }
      .settings-shortcut {
        display: flex;
      }
      main {
        min-height: 100dvh;
        min-width: 0;
        width: 100%;
        max-width: 100%;
        grid-template-rows: 54px 1fr;
        padding-bottom: calc(62px + env(safe-area-inset-bottom));
      }
      header {
        height: 54px;
        padding: 0 12px;
        position: sticky;
        top: 0;
        z-index: 18;
      }
      .page-title h1 {
        font-size: 18px;
      }
      .page-title p {
        display: none;
      }
      .header-actions {
        gap: 6px;
      }
      .chat-back {
        display: none;
      }
      .icon-btn {
        width: 38px;
        min-height: 38px;
        border-radius: 14px;
        box-shadow: none;
      }
      .content {
        height: calc(100dvh - 54px - 66px - env(safe-area-inset-bottom));
        overflow: auto;
        padding: 10px;
        min-width: 0;
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
      }
      .panel {
        padding: 12px;
        box-shadow: none;
        min-width: 0;
      }
      .panel:hover {
        transform: none;
      }
      .grid {
        gap: 10px;
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
      }
      #home .grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      #home .hero,
      #home .updates-card,
      #home .status-card {
        grid-column: 1 / -1;
      }
      #home .weather,
      #home .today-card {
        grid-column: auto;
        min-height: 158px;
      }
      #home .weather {
        display: grid;
        align-content: start;
      }
      #home .weather h3,
      #home .today-card h3 {
        margin-bottom: 8px;
        font-size: 14px;
      }
      #weatherText,
      #todayEvents {
        font-size: 12px;
        line-height: 1.35;
      }
      #weatherText {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
      #todayEvents .empty {
        padding: 8px 0 0;
      }
      #weatherBtn {
        min-height: 34px;
        margin-top: 10px !important;
        padding: 0 10px;
        border-radius: 14px;
        font-size: 12px;
        white-space: normal;
      }
      .hero {
        min-height: auto;
        grid-template-columns: minmax(0, 1fr) 76px;
        gap: 10px;
        align-items: start;
      }
      .hero h2 {
        font-size: 24px;
        line-height: 1.08;
      }
      .hero p {
        margin-top: 8px;
        font-size: 14px;
      }
      .hero [style*="display:flex"] {
        gap: 8px !important;
        margin-top: 12px !important;
      }
      .hero .primary,
      .hero .ghost {
        min-height: 40px;
        border-radius: 16px;
        padding: 0 12px;
        font-size: 14px;
      }
      .mascot-wrap,
      .mascot,
      .mascot-wave-arm {
        width: 76px;
      }
      .mascot-wrap {
        align-self: end;
        justify-self: end;
        margin-top: 34px;
      }
      .weather,
      .quick {
        min-height: auto;
      }
      .big-number {
        font-size: 34px;
      }
      .quick-row,
      .file-row,
      .event-row,
      .archive-row {
        min-height: 38px;
        padding: 8px 0;
      }
      .calendar-layout {
        display: flex;
        flex-direction: column;
      }
      .calendar-layout .panel:last-child {
        order: -1;
      }
      .calendar-grid {
        gap: 3px;
      }
      .compact-view .calendar-day,
      .calendar-day {
        min-height: 48px;
        border-radius: 10px;
        padding: 5px 3px;
      }
      .calendar-event {
        width: 7px;
        height: 7px;
        min-height: 7px;
        border-radius: 50%;
        padding: 0;
        overflow: hidden;
        color: transparent;
        justify-self: center;
      }
      .calendar-weekday {
        font-size: 10px;
      }
      .event-row {
        align-items: flex-start;
      }
      .archive-row {
        grid-template-columns: minmax(0, 1fr) 70px 32px;
        gap: 7px;
        padding: 7px 4px;
      }
      .archive-row strong {
        display: block;
        line-height: 1.12;
      }
      .archive-preview {
        max-width: 100%;
        font-size: 12px;
      }
      .archive-date {
        font-size: 12px;
        text-align: right;
      }
      .archive-delete {
        min-width: 30px;
        width: 30px;
        height: 30px;
      }
      .quick-row {
        gap: 10px;
      }
      .quick-row > span:last-child {
        max-width: 58%;
      }
      #chat.view.active {
        height: 100%;
      }
      .chat-shell {
        height: calc(100dvh - 54px - 66px - env(safe-area-inset-bottom) - 20px);
        display: block;
        min-width: 0;
        width: 100%;
        max-width: 100%;
      }
      .chat-panel {
        height: 100%;
        min-width: 0;
        width: 100%;
        border-radius: 0;
        border: 0;
        display: grid;
        grid-template-rows: minmax(0, 1fr) auto auto;
        background-color: transparent;
      }
      #messages {
        padding: 12px 8px;
        gap: 10px;
        background: transparent;
        min-width: 0;
      }
      .bubble {
        max-width: 90%;
        border-radius: 18px;
        padding: 11px 12px;
        font-size: 15px;
      }
      .composer {
        position: sticky;
        bottom: 0;
        z-index: 12;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
          "tools tools"
          "message send";
        gap: 6px;
        padding: 7px 7px calc(7px + env(safe-area-inset-bottom));
        width: 100%;
        min-width: 0;
        border: 1px solid var(--line);
        border-radius: 22px;
        background: color-mix(in srgb, var(--panel-solid) 90%, transparent);
        box-shadow: 0 12px 36px rgba(31, 37, 56, .12);
        align-items: flex-end;
      }
      .composer-tools {
        grid-area: tools;
        justify-content: flex-start;
      }
      .composer #message {
        grid-area: message;
        width: 100%;
      }
      .composer #sendBtn {
        grid-area: send;
      }
      .composer .ghost,
      .composer .primary {
        width: 42px;
        min-width: 42px;
        min-height: 42px;
        border-radius: 50%;
        justify-content: center;
        padding: 0;
      }
      #voiceBtn {
        width: 46px;
        min-width: 46px;
        min-height: 46px;
        background: color-mix(in srgb, var(--brand) 12%, var(--panel-2));
        border: 1px solid color-mix(in srgb, var(--brand) 32%, var(--line));
      }
      #voiceBtn .mic-icon {
        width: 23px;
        height: 23px;
      }
      textarea {
        min-width: 0;
        min-height: 42px;
        max-height: 118px;
        border-radius: 18px;
        padding: 10px 11px;
        font-size: 16px;
      }
      .chat-attach-row {
        padding: 7px 6px 0;
        border-top: 0;
      }
      .file-chip {
        font-size: 12px;
        padding: 6px 8px;
      }
      .chat-side {
        display: none;
      }
      .space-row {
        grid-template-columns: minmax(0, 1fr);
        column-gap: 8px;
        row-gap: 7px;
      }
      .space-edit,
      .space-delete {
        width: 100%;
        min-height: 34px;
      }
      .space-status {
        width: 100%;
        font-size: 11px;
      }
      .file-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .account-actions {
        display: grid;
        grid-template-columns: 1fr;
      }
      .account-actions .primary,
      .account-actions .ghost,
      #saveConnectionBtn,
      #pairingCodeBtn,
      #scanBtn,
      #resetConnectionBtn,
      #repairAllBtn,
      #restartPergentBtn,
      #reconnectHardwareBtn {
        width: 100%;
        min-width: 0;
        min-height: 40px;
        padding: 0 10px;
        font-size: 13px;
        line-height: 1.15;
        white-space: normal;
      }
      .user-account-row { grid-template-columns: 1fr; }
      .user-account-row .ghost { width: 100%; }
      .recovery-head { display: block; }
      .recovery-status-grid,
      .recovery-actions { grid-template-columns: 1fr; }
    }
    @media (max-width: 560px) {
      .brand strong { font-size: 17px; }
      .nav-btn {
        padding: 0 4px;
        font-size: 11px;
      }
      .hero { grid-template-columns: minmax(0, 1fr) 76px; }
      .mascot-wrap { justify-self: end; }
      .bubble { max-width: 92%; }
      .primary { min-width: 42px; padding: 0 10px; }
      .composer .primary { padding: 0; }
    }

    /* Der Chat bekommt auf kleinen Displays einen eigenen, ruhigen Arbeitsraum.
       Die globale Navigation bleibt außerhalb des Chats erreichbar; im Chat
       selbst nutzt die Unterhaltung die komplette Bildschirmhöhe. */
    @media (max-width: 720px) {
      body.chat-mode {
        overflow: hidden;
      }
      body.chat-mode aside {
        display: none;
      }
      body.chat-mode main {
        min-height: 100dvh;
        grid-template-rows: 54px 1fr;
        padding-bottom: 0;
      }
      body.chat-mode .chat-back {
        display: flex;
        flex: 0 0 auto;
        width: 38px;
        min-height: 38px;
        margin-right: 2px;
        border-radius: 14px;
        font-size: 26px;
        line-height: 1;
      }
      body.chat-mode .content {
        height: calc(100dvh - 54px);
        overflow: hidden;
        padding: 0;
      }
      body.chat-mode #chat.view.active,
      body.chat-mode .chat-shell,
      body.chat-mode .chat-panel {
        height: 100%;
      }
      body.chat-mode .chat-shell {
        min-height: 0;
      }
      body.chat-mode .chat-panel {
        border-radius: 0;
      }
      body.chat-mode #messages {
        padding-top: 14px;
        padding-bottom: 14px;
      }
    }
    @media (max-width: 390px) {
      .content { padding-left: 6px; padding-right: 6px; }
      #messages { padding-left: 4px; padding-right: 4px; }
      .composer {
        gap: 4px;
        padding: 6px;
        border-radius: 18px;
      }
      .composer .ghost,
      .composer .primary {
        width: 44px;
        min-width: 44px;
        min-height: 44px;
      }
      #voiceBtn {
        width: 42px;
        min-width: 42px;
        min-height: 42px;
      }
      textarea {
        min-height: 44px;
        padding: 9px 10px;
      }
    }
    .office-auth {
      position: fixed;
      inset: 0;
      z-index: 10000;
      display: grid;
      place-items: center;
      padding: 24px;
      background: linear-gradient(135deg, #eef2ff, #f7fbff 48%, #e9f8f6);
    }
    .office-auth[hidden] { display: none; }
    .office-auth-card {
      width: min(440px, 100%);
      padding: 34px;
      border: 1px solid rgba(190, 202, 219, .72);
      border-radius: 28px;
      background: rgba(255, 255, 255, .9);
      box-shadow: 0 24px 70px rgba(31, 37, 56, .16);
    }
    .office-auth-card h1 { margin: 0 0 8px; }
    .office-auth-card p { color: var(--muted); line-height: 1.5; }
    .office-auth-card .field { margin-top: 16px; }
    .office-auth-card input { width: 100%; }
    .office-auth-error { min-height: 22px; margin-top: 14px; color: var(--danger); }
    .office-auth-user { margin-top: 18px; font-size: .92rem; color: var(--muted); }

    /* Pergent UX refresh: calm workspace chrome, fewer visual layers, and
       consistent touch/focus targets across desktop and mobile. */
    :root {
      --radius: 20px;
      --shadow: 0 18px 44px rgba(31, 37, 56, .09);
      --soft-shadow: 0 8px 22px rgba(31, 37, 56, .07);
    }
    :where(button, input, textarea, select, summary):focus-visible {
      outline: 3px solid color-mix(in srgb, var(--brand) 70%, white);
      outline-offset: 2px;
    }
    .app { grid-template-columns: 232px minmax(0, 1fr); }
    aside { padding: 16px 12px; gap: 14px; }
    .brand { padding: 0 6px; }
    .brand strong { letter-spacing: -.02em; }
    nav { gap: 4px; }
    .nav-btn {
      min-height: 42px;
      border-radius: 13px;
      padding-inline: 12px;
      font-size: 14px;
    }
    .nav-btn.active { box-shadow: 0 9px 22px var(--mist-medium); }
    .nav-more { margin-top: 8px; padding-top: 8px; }
    .nav-more summary {
      min-height: 42px;
      border-radius: 13px;
      padding-inline: 12px;
      font-size: 14px;
    }
    .nav-more summary:hover { background: var(--panel-2); color: var(--ink); }
    .settings-shortcut { display: none !important; }
    .office-auth .brand { display: flex; }
    .ui-toast {
      position: fixed;
      top: 78px;
      right: 20px;
      z-index: 1200;
      max-width: min(380px, calc(100vw - 32px));
      padding: 12px 14px;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: var(--panel-solid);
      color: var(--ink);
      box-shadow: var(--shadow);
      opacity: 0;
      transform: translateY(-8px);
      pointer-events: none;
      transition: opacity .2s var(--ease), transform .2s var(--ease);
      font-size: 13px;
      line-height: 1.4;
    }
    .ui-toast.visible { opacity: 1; transform: translateY(0); }
    .ui-toast.error { border-color: color-mix(in srgb, var(--danger) 55%, var(--line)); }
    @media (max-width: 720px) { .ui-toast { top: 62px; right: 8px; left: 8px; max-width: none; } }
    main { min-width: 0; }
    header { min-height: 68px; padding-inline: clamp(16px, 3vw, 34px); }
    .content { padding: clamp(14px, 2.4vw, 30px); }
    .panel { border-radius: var(--radius); box-shadow: var(--soft-shadow); }
    .page-title h1 { letter-spacing: -.025em; }
    .page-title p { max-width: 64ch; }
    .chat-shell { height: calc(100dvh - 116px); gap: 18px; grid-template-columns: minmax(0, 1fr) 286px; }
    .chat-panel { border: 1px solid var(--line); border-radius: 22px; }
    #messages { scroll-behavior: smooth; overscroll-behavior: contain; }
    .bubble { line-height: 1.52; }
    .composer { padding: 10px; border-radius: 20px; }
    .composer textarea { line-height: 1.45; }
    .composer .primary, .composer .ghost { min-height: 44px; }

    @media (max-width: 920px) {
      .app { grid-template-columns: 1fr; }
      aside { padding: 10px 14px; }
      .chat-shell { height: calc(100dvh - 144px); }
    }
    @media (max-width: 720px) {
      aside { padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); }
      nav { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
      nav .nav-btn { min-height: 48px; border-radius: 14px; font-size: 11px; }
      .nav-more {
        display: block;
        position: relative;
        border: 0;
        margin: 0;
        padding: 0;
        min-width: 0;
      }
      .nav-more summary {
        min-height: 48px;
        padding: 0 4px;
        justify-content: center;
        font-size: 11px;
        font-weight: 600;
        white-space: nowrap;
      }
      .nav-more summary::after { margin-left: 2px; }
      .nav-more[open] {
        position: absolute;
        right: 8px;
        bottom: calc(100% + 8px);
        width: min(280px, calc(100vw - 16px));
        padding: 10px;
        border: 1px solid var(--line);
        border-radius: 18px;
        background: var(--panel-solid);
        box-shadow: var(--shadow);
      }
      .nav-more[open] summary { justify-content: space-between; padding-inline: 12px; font-size: 13px; }
      .nav-more[open] .nav-group-label { display: block; }
      .nav-more[open] .nav-btn { display: flex; width: 100%; margin-top: 3px; min-height: 40px; font-size: 13px; }
      .nav-more[open] .nav-btn.active { color: white; }
      .nav-more .nav-group-label { display: none; }
      .nav-more .nav-btn { display: none; }
      .content { padding: 8px; }
      .chat-shell { height: calc(100dvh - 54px - 66px - env(safe-area-inset-bottom) - 16px); }
      .chat-panel { border-radius: 18px; }
      .composer { padding: 8px; border-radius: 18px; }
      .composer-tools { gap: 4px; }
      .composer-menu-body { width: min(320px, calc(100vw - 20px)); }
      .bubble { max-width: 92%; font-size: 15px; }
      .settings-layout { gap: 12px; }
      .settings-layout .panel { padding: 16px; }
      .settings-layout h3 { letter-spacing: -.01em; }
      #onboardingForm { grid-template-columns: 1fr; }
      #onboardingForm > .field,
      #onboardingForm > .field:nth-child(3),
      #onboardingForm > .field:nth-child(6),
      #onboardingForm > .field:nth-child(7),
      #onboardingForm > div:last-child { grid-column: 1 / -1; }
    }
    @media (max-width: 390px) {
      nav .nav-btn, .nav-more summary { font-size: 10px; }
      .composer textarea { min-height: 48px; }
    }