*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    :root {
      --primary: #2563eb; --primary-dark: #1d4ed8;
      --success: #10b981; --danger: #dc2626;
      --bg: #f1f5f9; --card: #fff; --text: #1e293b; --muted: #64748b;
      --border: #e2e8f0;
      --sh: 0 1px 3px rgba(0,0,0,.1),0 1px 2px rgba(0,0,0,.06);
      --sh-lg: 0 10px 25px rgba(0,0,0,.12);
      /* category colors -- a separate axis from the trip cc-* city colors below:
         these mark which section (trip/work/social/vida) an item belongs to,
         used across the app nav, calendar, and the life-item sections. */
      --cat-trip:#2563eb; --cat-work:#7c3aed; --cat-social:#db2777; --cat-vida:#0891b2; --cat-inbox:#475569;
    }
    body { font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; background:var(--bg); color:var(--text); min-height:100vh; }

    /* All top-level views start hidden so nothing flashes before showView() picks one
       once auth/session state resolves -- #main-view and #inbox-view had no such rule
       of their own and would otherwise briefly render at their default `display:block`. */
    #login-view, #home-view, #trips-view, #main-view, #detail-view,
    #work-view, #social-view, #life-view, #calendar-view, #inbox-view { display:none; }

    /* ── HEADER ── */
    .hdr { background:linear-gradient(135deg,#0f2044,#1e3a8a 55%,#1d4ed8); color:#fff; padding:1.6rem 1.25rem 1.1rem; text-align:center; }
    .hdr h1 { font-size:1.85rem; font-weight:800; letter-spacing:-.02em; }
    .hdr-sub { opacity:.75; font-size:.82rem; margin-top:.2rem; }
    .route-strip { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:.25rem; margin-top:.8rem; font-size:.72rem; }
    .rc { background:rgba(255,255,255,.15); padding:.2rem .5rem; border-radius:1rem; font-weight:600; letter-spacing:.05em; }
    .ra { opacity:.45; font-size:.65rem; }

    /* ── TABS ── */
    .tab-nav { display:flex; background:#fff; border-bottom:1px solid var(--border); }
    .tab-btn { flex:1; padding:.8rem .5rem; border:none; background:none; cursor:pointer; font-family:inherit; font-size:.88rem; font-weight:500; color:var(--muted); border-bottom:3px solid transparent; transition:all .15s; }
    .tab-btn.active { color:var(--primary); border-bottom-color:var(--primary); font-weight:700; }
    .tab-btn:hover:not(.active) { background:var(--bg); }

    /* ── STATS ── */
    .stats-bar { display:flex; background:#fff; border-bottom:1px solid var(--border); overflow-x:auto; }
    .si { flex:1; min-width:65px; text-align:center; padding:.75rem .4rem; border-right:1px solid var(--border); }
    .si:last-child { border-right:none; }
    .si-n { font-size:1.25rem; font-weight:800; color:var(--primary); line-height:1; }
    .si-l { font-size:.58rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin-top:.15rem; }

    /* ── CONTAINER ── */
    .ctr { max-width:900px; margin:0 auto; padding:1.1rem 1rem; }

    /* ── CALENDAR VIEW: DAY CARDS ── */
    .days-list { display:flex; flex-direction:column; gap:.5rem; }
    .day-card { background:var(--card); border-radius:13px; border:1px solid var(--border); border-left:4px solid var(--border); box-shadow:var(--sh); cursor:pointer; transition:transform .12s,box-shadow .12s; }
    .day-card:hover { transform:translateY(-2px); box-shadow:var(--sh-lg); }
    .day-inner { display:flex; align-items:center; padding:.8rem 1rem; gap:.8rem; }
    .ddb { min-width:44px; text-align:center; }
    .ddb-n { font-size:1.4rem; font-weight:800; color:var(--primary); line-height:1; }
    .ddb-m { font-size:.6rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); }
    .dm { flex:1; min-width:0; }
    .dm-city { font-size:.92rem; font-weight:600; }
    .dm-subtitle { font-size:.78rem; font-weight:400; color:var(--muted); margin-left:.4rem; }
    .dm-route { font-size:.72rem; color:var(--muted); margin-top:.07rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .dm-note { font-size:.68rem; color:var(--success); margin-top:.07rem; }
    .dm-file { font-size:.68rem; color:#7c3aed; margin-top:.07rem; }
    .day-badges { display:flex; flex-direction:column; align-items:flex-end; gap:.2rem; flex-shrink:0; }
    .badge { display:inline-flex; align-items:center; gap:.2rem; font-size:.65rem; font-weight:600; padding:.15rem .42rem; border-radius:1rem; white-space:nowrap; }
    .bp { background:#dbeafe; color:#1d4ed8; }
    .bt { background:#d1fae5; color:#065f46; }
    .bs { background:#f1f5f9; color:#475569; }
    .bw { background:#fee2e2; color:#dc2626; } /* pending warning badge */

    /* pending day card */
    .day-card.day-pending { background:#fff9f9; }
    /* undefined/unplanned day */
    .day-card.day-undef { background:#fffbeb; }
    .bu { background:#fef3c7; color:#92400e; }
    .tr-undef td { background:#fffbeb !important; }
    .tr-undef:hover td { background:#fef9c3 !important; }
    .tr-undef.tr-warn td { background:#fff5f5 !important; }
    /* plan toggle button in detail header */
    .plan-btn { border-radius:7px; padding:.25rem .6rem; cursor:pointer; font-size:.72rem; transition:all .15s; white-space:nowrap; font-family:inherit; border:1px solid; }
    .plan-btn-undef { background:#fef3c7; color:#92400e; border-color:#fde68a; }
    .plan-btn-undef:hover { background:#fde68a; }
    .plan-btn-ok { background:#d1fae5; color:#065f46; border-color:#6ee7b7; }
    .plan-btn-ok:hover { background:#a7f3d0; }

    /* city colours */
    .cc-scl  { border-left-color:#dc2626; }
    .cc-lhr  { border-left-color:#7c3aed; }
    .cc-arn  { border-left-color:#0891b2; }
    .cc-edb  { border-left-color:#059669; }
    .cc-mad  { border-left-color:#d97706; }
    .cc-transit { border-left-color:#6b7280; }

    .add-day-btn { display:flex; align-items:center; justify-content:center; gap:.45rem; width:100%; padding:.85rem; border:2px dashed var(--border); border-radius:13px; background:none; cursor:pointer; color:var(--muted); font-size:.88rem; font-family:inherit; transition:all .15s; margin-top:.5rem; }
    .add-day-btn:hover { border-color:var(--primary); color:var(--primary); background:#eff6ff; }
    .checkin-banner { display:flex; align-items:center; gap:.5rem; background:#fef3c7; color:#92400e; border-top:1px solid #fde68a; padding:.45rem 1rem; border-radius:0 0 10px 10px; font-size:.8rem; font-weight:700; }
    .checkin-banner-ico { font-size:1.15rem; }

    /* ── TABLE VIEW ── */
    #table-panel { display:none; }
    .tbl-wrap { border-radius:13px; box-shadow:var(--sh); border:1px solid var(--border); overflow:hidden; background:var(--card); }
    .tbl-scroll { overflow-x:auto; }
    table.itbl { width:100%; border-collapse:collapse; font-size:.8rem; white-space:nowrap; }
    table.itbl th { background:#f8fafc; font-size:.65rem; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); font-weight:700; padding:.65rem .8rem; text-align:left; border-bottom:2px solid var(--border); }
    table.itbl td { padding:.65rem .8rem; border-bottom:1px solid var(--border); vertical-align:middle; }
    table.itbl tbody tr:last-child td { border-bottom:none; }
    table.itbl tbody tr:hover td { background:#f8fafc; }
    .tbl-sep td { border-top:2px solid var(--border) !important; }
    .tbl-date { font-weight:700; color:var(--primary); font-size:.78rem; }
    .tbl-free { font-style:italic; color:var(--muted); }
    .tbl-free:hover td { cursor:pointer; background:#f1f5f9 !important; }
    .tbl-act { background:none; border:1px solid var(--border); border-radius:6px; padding:.18rem .5rem; cursor:pointer; font-size:.72rem; color:var(--muted); transition:all .15s; font-family:inherit; }
    .tbl-act:hover { background:var(--primary); color:#fff; border-color:var(--primary); }
    .tbl-add-row { display:flex; align-items:center; justify-content:center; gap:.4rem; width:100%; padding:.75rem; background:none; border:none; border-top:1px dashed var(--border); cursor:pointer; color:var(--muted); font-size:.82rem; font-family:inherit; transition:all .15s; }
    .tbl-add-row:hover { color:var(--primary); background:#f8fafc; }
    .sp-ok { color:#059669; font-weight:600; }
    .sp-pending { color:#d97706; font-weight:600; }
    .sp-canceled { color:#dc2626; font-weight:600; }
    /* pending table rows */
    .tr-warn td { background:#fff5f5 !important; }
    .tr-warn:hover td { background:#fee2e2 !important; }
    .tr-warn.tbl-sep td { border-top-color:#fecaca !important; }
    /* clickable status in table */
    .status-toggle { background:none; border:1px solid transparent; border-radius:6px; cursor:pointer; padding:.15rem .35rem; font-size:.82rem; transition:background .12s; font-family:inherit; }
    .status-toggle:hover { background:var(--border); border-color:var(--border); }
    /* ticket checkbox row in transport cards */
    .ticket-row { display:flex; align-items:center; gap:.55rem; margin-top:.75rem; padding-top:.75rem; border-top:1px solid var(--border); font-size:.82rem; color:var(--muted); cursor:pointer; }
    .ticket-row input[type=checkbox] { width:15px; height:15px; cursor:pointer; accent-color:var(--primary); flex-shrink:0; }
    .ticket-row label { cursor:pointer; flex:1; }
    .ticket-missing { margin-left:auto; font-size:.7rem; color:#dc2626; font-weight:600; white-space:nowrap; }
    .ticket-confirmed { margin-left:auto; font-size:.7rem; color:var(--success); font-weight:600; }

    /* ── DETAIL VIEW ── */
    .back-btn { display:inline-flex; align-items:center; gap:.4rem; background:var(--card); border:1px solid var(--border); padding:.4rem .85rem; border-radius:8px; cursor:pointer; font-size:.82rem; color:var(--muted); margin-bottom:1rem; transition:all .15s; box-shadow:var(--sh); font-family:inherit; }
    .back-btn:hover { background:var(--primary); color:#fff; border-color:var(--primary); }

    .detail-hdr { background:var(--card); border-radius:13px; border:1px solid var(--border); border-top:5px solid var(--primary); padding:1.25rem; margin-bottom:1rem; box-shadow:var(--sh); }
    .dh-row { display:flex; align-items:flex-start; justify-content:space-between; gap:.5rem; }
    .dh-date { font-size:.78rem; color:var(--muted); margin-bottom:.2rem; }
    .dh-city { font-size:1.55rem; font-weight:800; letter-spacing:-.01em; }
    .dh-subtitle { font-size:.85rem; font-weight:500; color:var(--muted); margin-top:.15rem; }
    .dh-edit { background:none; border:1px solid var(--border); border-radius:7px; padding:.25rem .6rem; cursor:pointer; font-size:.72rem; color:var(--muted); transition:all .15s; white-space:nowrap; flex-shrink:0; font-family:inherit; }
    .dh-edit:hover { background:var(--primary); color:#fff; border-color:var(--primary); }
    .dh-nav { display:flex; gap:.5rem; margin-top:.85rem; }
    .nav-btn { flex:1; padding:.42rem .55rem; border:1px solid var(--border); border-radius:8px; background:none; cursor:pointer; font-size:.74rem; color:var(--muted); text-align:center; transition:all .15s; font-family:inherit; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .nav-btn:hover:not(:disabled) { background:var(--primary); color:#fff; border-color:var(--primary); }
    .nav-btn:disabled { opacity:.3; cursor:not-allowed; }

    .sec-title { font-size:.66rem; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); font-weight:700; margin:1rem 0 .6rem; }

    /* transport cards */
    .tc { background:var(--card); border-radius:13px; border:1px solid var(--border); padding:1.1rem; margin-bottom:.7rem; box-shadow:var(--sh); }
    .tc-hd { display:flex; align-items:center; justify-content:space-between; margin-bottom:.9rem; }
    .tc-type { display:flex; align-items:center; gap:.45rem; font-weight:700; font-size:.9rem; }
    .tc-acts { display:flex; align-items:center; gap:.4rem; }
    .sp { font-size:.67rem; font-weight:600; padding:.17rem .48rem; border-radius:1rem; }
    .sp-ok-pill { background:#d1fae5; color:#065f46; }
    .sp-pending-pill { background:#fef3c7; color:#92400e; }
    .sp-canceled-pill { background:#fee2e2; color:#991b1b; }
    .edit-btn { background:none; border:1px solid var(--border); padding:.24rem .62rem; border-radius:7px; cursor:pointer; font-size:.74rem; color:var(--muted); transition:all .15s; font-family:inherit; }
    .edit-btn:hover { background:var(--primary); color:#fff; border-color:var(--primary); }
    .rr { display:flex; align-items:center; gap:.55rem; margin-bottom:.85rem; }
    .rre { flex:1; }
    .rre-code { font-size:1.4rem; font-weight:800; color:var(--primary); }
    .rre-name { font-size:.68rem; color:var(--muted); }
    .rre-time { font-size:.92rem; font-weight:700; margin-top:.04rem; }
    .rre-term { font-size:.65rem; color:var(--muted); }
    .rre-r { text-align:right; }
    .rrm { flex:1; display:flex; flex-direction:column; align-items:center; gap:.18rem; }
    .rrm-fn { font-size:.6rem; color:var(--muted); font-weight:600; }
    .rrm-line { width:100%; height:2px; background:linear-gradient(to right,var(--primary),#0891b2); border-radius:1px; position:relative; }
    .rrm-line::after { content:'▶'; position:absolute; right:-4px; top:-7px; font-size:.6rem; color:#0891b2; }
    .rrm-op { font-size:.6rem; color:var(--muted); text-align:center; }
    .tc-meta { display:flex; flex-wrap:wrap; gap:.4rem 1.2rem; border-top:1px solid var(--border); padding-top:.8rem; }
    .mi label { font-size:.6rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); display:block; }
    .mi span { font-size:.85rem; font-weight:600; }
    .mono { font-family:'SF Mono','Fira Code',monospace; letter-spacing:.07em; }

    .free-day { background:var(--card); border-radius:13px; border:1px solid var(--border); padding:1.75rem; text-align:center; margin-bottom:.7rem; box-shadow:var(--sh); }
    .free-day .fe { font-size:2rem; margin-bottom:.45rem; }
    .free-day p { color:var(--muted); font-size:.88rem; }

    .add-btn { width:100%; border:2px dashed var(--border); background:none; border-radius:13px; padding:.78rem; cursor:pointer; color:var(--muted); font-size:.87rem; font-family:inherit; transition:all .15s; margin-bottom:.7rem; }
    .add-btn:hover { border-color:var(--primary); color:var(--primary); background:#eff6ff; }

    /* files */
    .files-card { background:var(--card); border-radius:13px; border:1px solid var(--border); padding:1.1rem; margin-bottom:.7rem; box-shadow:var(--sh); }
    .files-card h3 { font-size:.86rem; font-weight:700; margin-bottom:.75rem; display:flex; align-items:center; gap:.35rem; }
    .file-list { display:flex; flex-direction:column; gap:.35rem; margin-bottom:.65rem; }
    .file-item { display:flex; align-items:center; gap:.6rem; padding:.45rem .7rem; background:var(--bg); border-radius:8px; border:1px solid var(--border); }
    .file-ic { font-size:1.15rem; flex-shrink:0; }
    .file-inf { flex:1; min-width:0; }
    .file-nm { font-size:.8rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .file-sz { font-size:.65rem; color:var(--muted); }
    .file-open { background:none; border:1px solid var(--border); border-radius:6px; padding:.2rem .55rem; cursor:pointer; font-size:.72rem; color:var(--muted); transition:all .15s; flex-shrink:0; font-family:inherit; }
    .file-open:hover { background:var(--primary); color:#fff; border-color:var(--primary); }
    .file-del { background:none; border:none; cursor:pointer; color:var(--muted); font-size:.9rem; padding:.18rem; transition:color .15s; flex-shrink:0; }
    .file-del:hover { color:var(--danger); }
    .upload-lbl { display:inline-flex; align-items:center; gap:.4rem; border:1px dashed var(--border); border-radius:8px; padding:.42rem .85rem; cursor:pointer; font-size:.8rem; color:var(--muted); transition:all .15s; }
    .upload-lbl:hover { border-color:var(--primary); color:var(--primary); }

    /* inbox dropzone -- same dashed-border idiom as .upload-lbl above, just
       block-level and taller since it's the whole view's primary action */
    .inbox-dropzone { display:flex; align-items:center; justify-content:center; gap:.5rem; border:2px dashed var(--border); border-radius:13px; padding:2.2rem 1rem; cursor:pointer; font-size:.9rem; color:var(--muted); text-align:center; transition:all .15s; background:var(--card); }
    .inbox-dropzone:hover { border-color:var(--primary); color:var(--primary); }
    .inbox-dropzone.drag-over { border-color:var(--primary); color:var(--primary); background:#eff6ff; }

    .inbox-dup-banner { background:#fffbeb; border:1px solid #fde68a; color:#92400e; border-radius:8px; padding:.55rem .75rem; font-size:.8rem; margin-bottom:.8rem; }
    .badge-dup { background:#fef3c7; color:#92400e; }

    /* notes */
    .notes-card { background:var(--card); border-radius:13px; border:1px solid var(--border); padding:1.1rem; box-shadow:var(--sh); }
    .notes-card h3 { font-size:.86rem; font-weight:700; margin-bottom:.65rem; }
    .nta { width:100%; min-height:100px; border:1px solid var(--border); border-radius:8px; padding:.65rem .8rem; font-family:inherit; font-size:.88rem; resize:vertical; color:var(--text); background:#f8fafc; transition:border-color .15s; }
    .nta:focus { outline:none; border-color:var(--primary); background:#fff; }
    .save-notes { margin-top:.5rem; background:var(--primary); color:#fff; border:none; padding:.46rem 1.1rem; border-radius:8px; cursor:pointer; font-size:.82rem; font-weight:600; font-family:inherit; transition:background .15s; }
    .save-notes:hover { background:var(--primary-dark); }
    .save-notes.saved { background:var(--success); }

    /* ── MODALS ── */
    .overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:200; padding:1rem; align-items:flex-end; justify-content:center; }
    .overlay.open { display:flex; }
    @media(min-width:540px){ .overlay { align-items:center; } .modal { border-radius:14px; } }
    .modal { background:var(--card); border-radius:18px 18px 0 0; padding:1.35rem; width:100%; max-width:490px; max-height:92vh; overflow-y:auto; box-shadow:var(--sh-lg); animation:su .22s ease; }
    @keyframes su { from{transform:translateY(40px);opacity:0} to{transform:translateY(0);opacity:1} }
    .modal-hd { display:flex; align-items:center; justify-content:space-between; margin-bottom:1rem; }
    .modal-ttl { font-size:1rem; font-weight:700; }
    .modal-x { background:var(--bg); border:none; border-radius:50%; width:27px; height:27px; cursor:pointer; font-size:.9rem; color:var(--muted); display:flex; align-items:center; justify-content:center; }
    .modal-x:hover { background:var(--border); }
    .fg { margin-bottom:.8rem; }
    .fg label { display:block; font-size:.67rem; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; margin-bottom:.27rem; }
    .fg input, .fg select { width:100%; border:1px solid var(--border); border-radius:8px; padding:.5rem .75rem; font-family:inherit; font-size:.88rem; color:var(--text); background:var(--bg); transition:border-color .15s; }
    .fg input:focus, .fg select:focus { outline:none; border-color:var(--primary); background:#fff; }
    .frow { display:grid; grid-template-columns:1fr 1fr; gap:.65rem; }
    .modal-ft { display:flex; gap:.5rem; margin-top:1.2rem; padding-top:.85rem; border-top:1px solid var(--border); }
    .btn { padding:.52rem .95rem; border-radius:8px; border:none; cursor:pointer; font-size:.85rem; font-weight:600; font-family:inherit; transition:all .15s; }
    .btn-p { background:var(--primary); color:#fff; flex:1; }
    .btn-p:hover { background:var(--primary-dark); }
    .btn-s { background:var(--bg); border:1px solid var(--border); color:var(--muted); }
    .btn-s:hover { background:var(--border); }
    .btn-d { background:#fee2e2; color:var(--danger); border:1px solid #fecaca; }
    .btn-d:hover { background:#fecaca; }

    /* ── ASSISTANT (Home view voice/text button + chat sheets) ── */
    #home-view .ctr { padding-bottom:6rem; } /* keep the last card clear of the fixed bar below */
    .assistant-bar { position:fixed; left:1rem; right:1rem; bottom:1rem; max-width:868px; margin:0 auto; display:flex; gap:.5rem; z-index:150; }
    .assistant-bar-btn { flex:1; display:flex; align-items:center; justify-content:center; gap:.45rem; background:var(--primary); color:#fff; border:none; border-radius:16px; padding:.9rem; font-size:.9rem; font-weight:600; font-family:inherit; cursor:pointer; box-shadow:var(--sh-lg); transition:transform .12s; }
    .assistant-bar-btn:active { transform:scale(.96); }
    .assistant-bar-btn-alt { background:var(--card); color:var(--text); border:1px solid var(--border); }
    .assistant-history-btn { width:54px; flex-shrink:0; border-radius:16px; border:1px solid var(--border); background:var(--card); font-size:1.15rem; cursor:pointer; box-shadow:var(--sh-lg); transition:transform .12s; }
    .assistant-history-btn:active { transform:scale(.94); }

    /* Chat sheet stays open across turns -- modal becomes a flex column so the
       thread scrolls internally while the composer stays pinned at the bottom,
       instead of the whole sheet (and the composer with it) scrolling away. */
    .assistant-modal { display:flex; flex-direction:column; max-height:85vh; }
    .assistant-composer { display:flex; align-items:center; gap:.5rem; margin-top:.9rem; padding-top:.8rem; border-top:1px solid var(--border); flex-shrink:0; }
    #assistant-inline-input { flex:1; border:1px solid var(--border); border-radius:20px; padding:.55rem 1rem; font-family:inherit; font-size:.88rem; color:var(--text); background:var(--bg); }
    .assistant-inline-btn { width:38px; height:38px; border-radius:50%; border:none; cursor:pointer; font-size:1rem; display:flex; align-items:center; justify-content:center; flex-shrink:0; background:var(--bg); color:var(--muted); transition:transform .12s; }
    .assistant-inline-btn:active { transform:scale(.9); }
    .assistant-inline-send { background:var(--primary); color:#fff; }

    .rec-dot { width:10px; height:10px; border-radius:50%; background:var(--danger); flex-shrink:0; animation:recpulse 1.1s infinite; }
    @keyframes recpulse { 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:.35; transform:scale(1.4); } }
    .rec-info { flex:1; font-size:.85rem; color:var(--muted); }
    .assistant-rec-cancel, .assistant-rec-stop { width:36px; height:36px; border-radius:50%; border:none; cursor:pointer; font-size:1rem; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:transform .12s; }
    .assistant-rec-cancel { background:var(--bg); color:var(--muted); }
    .assistant-rec-stop { background:var(--success); color:#fff; }
    .assistant-rec-cancel:active, .assistant-rec-stop:active { transform:scale(.9); }

    .assistant-thread { display:flex; flex-direction:column; gap:.65rem; overflow-y:auto; max-height:60vh; }
    .assistant-modal .assistant-thread { flex:1; min-height:120px; max-height:none; } /* chat sheet: header/composer fixed, only the thread itself scrolls, within the modal's own max-height */
    .assistant-bubble { max-width:85%; padding:.6rem .85rem; border-radius:15px; font-size:.88rem; line-height:1.45; white-space:pre-wrap; animation:bubblein .18s ease; }
    @keyframes bubblein { from{ transform:translateY(6px); opacity:0; } to{ transform:translateY(0); opacity:1; } }
    .assistant-bubble.user { align-self:flex-end; background:var(--primary); color:#fff; border-bottom-right-radius:4px; }
    .assistant-bubble.assistant { align-self:flex-start; background:var(--bg); color:var(--text); border-bottom-left-radius:4px; }
    .assistant-bubble-time { font-size:.68rem; color:var(--muted); margin-top:.3rem; opacity:.8; }
    .assistant-typing { display:inline-flex; gap:.28rem; padding:.15rem 0; }
    .assistant-typing span { width:6px; height:6px; border-radius:50%; background:var(--muted); animation:typingbounce 1.2s infinite ease-in-out; }
    .assistant-typing span:nth-child(2) { animation-delay:.15s; }
    .assistant-typing span:nth-child(3) { animation-delay:.3s; }
    @keyframes typingbounce { 0%,80%,100%{ transform:translateY(0); opacity:.4; } 40%{ transform:translateY(-4px); opacity:1; } }
    .assistant-empty { text-align:center; color:var(--muted); font-size:.85rem; padding:1.5rem 0; }

    /* Preview-then-confirm diff cards -- the assistant shows what it's about to
       change before anything is actually saved (see runAssistantTurn's
       interactive mode / GATED_WRITE_TOOLS in assistant.ts). */
    .assistant-diff-wrap { display:flex; flex-direction:column; gap:.5rem; margin:-.15rem 0 .3rem; animation:bubblein .2s ease; }
    .assistant-diff-card { background:var(--card); border:1px solid var(--border); border-left:3px solid var(--muted); border-radius:12px; padding:.65rem .8rem; box-shadow:var(--sh); max-width:92%; }
    .assistant-diff-card.diff-edit { border-left-color:var(--primary); }
    .assistant-diff-card.diff-created { border-left-color:var(--success); }
    .assistant-diff-card.diff-removed { border-left-color:var(--danger); }
    .diff-card-hd { display:flex; align-items:center; gap:.4rem; margin-bottom:.4rem; }
    .diff-card-icon { font-size:.95rem; }
    .diff-card-title { font-size:.85rem; font-weight:700; flex:1; }
    .diff-badge { font-size:.66rem; font-weight:600; padding:.15rem .5rem; border-radius:1rem; white-space:nowrap; }
    .diff-badge-applied { background:#dbeafe; color:#1d4ed8; }
    .diff-badge-created { background:#d1fae5; color:#047857; }
    .diff-badge-removed { background:#fee2e2; color:var(--danger); }
    .diff-card-body { display:flex; flex-direction:column; gap:.3rem; }
    .diff-field { display:flex; align-items:baseline; gap:.5rem; font-size:.78rem; flex-wrap:wrap; }
    .diff-field-empty { color:var(--muted); font-style:italic; }
    .diff-label { color:var(--muted); flex-shrink:0; min-width:5.5rem; }
    .diff-values { display:inline-flex; align-items:baseline; gap:.4rem; flex-wrap:wrap; }
    .diff-before.diff-strike { color:var(--muted); text-decoration:line-through; }
    .diff-arrow { color:var(--muted); }
    .diff-after { font-weight:600; color:var(--text); }
    .diff-removed .diff-before.diff-strike { color:var(--danger); }
    .diff-created .diff-after { color:#047857; }

    .assistant-proposal-actions { display:flex; gap:.5rem; margin-top:.15rem; max-width:92%; }
    .assistant-proposal-btn { flex:1; padding:.5rem .7rem; font-size:.8rem; }
    .assistant-proposal-result { font-size:.78rem; font-weight:600; padding:.4rem .7rem; border-radius:8px; text-align:center; }
    .assistant-proposal-done { background:#d1fae5; color:#047857; }
    .assistant-proposal-discarded { background:var(--bg); color:var(--muted); }
    .assistant-proposal-error { background:#fee2e2; color:var(--danger); }

    /* Read-only calendar/day overview cards the assistant attaches to a reply
       (get_itinerary/get_agenda -- see ctx.views in tripTools.ts/lifeTools.ts).
       Each entry is tappable -- opens the real day-detail/life-item edit screen
       instead of reinventing editing inside the chat (see jumpFromAssistantEntry). */
    .assistant-view-wrap { margin:-.15rem 0 .3rem; max-width:92%; animation:bubblein .2s ease; }
    .assistant-view-card { background:var(--card); border:1px solid var(--border); border-radius:12px; padding:.6rem .7rem; box-shadow:var(--sh); }
    .view-card-title { font-size:.8rem; font-weight:700; margin-bottom:.35rem; }
    .view-card-list { display:flex; flex-direction:column; gap:.15rem; max-height:15rem; overflow-y:auto; }
    .assistant-view-entry { display:flex; align-items:center; gap:.55rem; padding:.4rem .3rem; border-radius:8px; cursor:pointer; transition:background .12s; }
    .assistant-view-entry:hover, .assistant-view-entry:active { background:var(--bg); }
    .view-entry-icon { font-size:1rem; flex-shrink:0; }
    .view-entry-main { flex:1; min-width:0; }
    .view-entry-title { font-size:.82rem; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .view-entry-sub { font-size:.7rem; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .view-entry-badge { font-size:.8rem; flex-shrink:0; }
    .view-entry-go { color:var(--muted); font-size:1rem; flex-shrink:0; }

    /* "Wallet style" cards for a document/ticket found via the assistant's
       find_documents tool (ctx.documents -- see documentTools.ts). Same card
       shell as .assistant-view-card; the original file is shown inline (an
       image, so any real QR/barcode it contains stays visible/scannable) or
       linked to (a PDF) below the extracted key facts. */
    .assistant-doc-wrap { margin:-.15rem 0 .3rem; max-width:92%; display:flex; flex-direction:column; gap:.5rem; animation:bubblein .2s ease; }
    .assistant-doc-card { background:var(--card); border:1px solid var(--border); border-radius:12px; padding:.65rem .7rem; box-shadow:var(--sh); }
    .doc-card-header { display:flex; align-items:center; gap:.55rem; margin-bottom:.4rem; }
    .doc-card-fields { display:flex; flex-direction:column; gap:.15rem; margin-bottom:.5rem; }
    .doc-field-row { display:flex; gap:.4rem; font-size:.74rem; }
    .doc-field-label { color:var(--muted); flex-shrink:0; }
    .doc-field-value { color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .doc-card-code { font-family:monospace; font-size:.72rem; background:var(--bg); border-radius:.4rem; padding:.05rem .4rem; }
    .doc-card-image { display:block; width:100%; max-width:220px; border-radius:10px; border:1px solid var(--border); cursor:zoom-in; margin:0 auto; }
    .doc-card-link-btn { display:inline-flex; align-items:center; gap:.3rem; font-size:.78rem; font-weight:600; color:var(--primary); text-decoration:none; }
    .doc-card-goto { margin-top:.5rem; font-size:.74rem; color:var(--muted); cursor:pointer; text-align:right; }
    .doc-card-goto:hover { color:var(--text); }

    #assistant-return-fab { position:fixed; right:1rem; bottom:1rem; z-index:140; width:52px; height:52px; border-radius:50%; border:none; background:var(--primary); color:#fff; font-size:1.3rem; box-shadow:var(--sh-lg); cursor:pointer; align-items:center; justify-content:center; animation:bubblein .2s ease; transition:transform .12s; }
    #assistant-return-fab:active { transform:scale(.92); }

    /* color swatches for day modal */
    .swatches { display:flex; gap:.4rem; flex-wrap:wrap; margin-top:.3rem; }
    .sw { width:26px; height:26px; border-radius:50%; border:2px solid transparent; cursor:pointer; transition:transform .1s; }
    .sw:hover { transform:scale(1.15); }
    .sw.sel { border-color:var(--text); transform:scale(1.1); }

    /* export button in header */
    .export-btn { background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.3); color:#fff; border-radius:8px; padding:.32rem .8rem; cursor:pointer; font-size:.75rem; font-family:inherit; transition:background .15s; margin-top:.7rem; }
    .export-btn:hover { background:rgba(255,255,255,.28); }
    /* scrollbar */
    ::-webkit-scrollbar { width:5px; height:5px; }
    ::-webkit-scrollbar-thumb { background:var(--border); border-radius:3px; }
    @media(max-width:400px){ .frow{grid-template-columns:1fr;} .dh-city{font-size:1.3rem;} }

    /* ── TRIPS VIEW ── */
    .trip-badge-owner { background:#dbeafe; color:#1d4ed8; }
    .trip-badge-shared { background:#f1f5f9; color:#475569; }
    .member-row { display:flex; align-items:center; gap:.6rem; padding:.5rem 0; border-bottom:1px solid var(--border); font-size:.85rem; }
    .member-row:last-child { border-bottom:none; }
    .member-email { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .member-pending { color:var(--muted); font-size:.7rem; }
    .member-del { background:none; border:none; color:var(--danger); cursor:pointer; font-size:.9rem; padding:.2rem .4rem; }

    /* ── SAVE STATUS TOAST ── */
    #save-status { position:fixed; bottom:1rem; left:50%; transform:translateX(-50%) translateY(220%); background:var(--danger); color:#fff; padding:.5rem .95rem; border-radius:8px; font-size:.8rem; font-weight:600; box-shadow:var(--sh-lg); transition:transform .25s; z-index:300; pointer-events:none; white-space:nowrap; }
    #save-status.show { transform:translateX(-50%) translateY(0); }

    /* ── APP NAV (persistent top-level section switcher) ── */
    #app-nav { display:none; background:#0f2044; overflow-x:auto; }
    .app-nav-row { display:flex; min-width:max-content; }
    .app-nav-btn { flex:1; min-width:max-content; padding:.65rem .9rem; border:none; background:none; cursor:pointer; font-family:inherit; font-size:.8rem; font-weight:600; color:rgba(255,255,255,.6); border-bottom:3px solid transparent; transition:all .15s; white-space:nowrap; }
    .app-nav-btn.active { color:#fff; border-bottom-color:var(--primary); }
    .app-nav-btn:hover:not(.active) { color:rgba(255,255,255,.9); }

    /* type filter chips (life-item sections + calendar category filter) */
    .chip-row { display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:.8rem; }
    .chip { background:var(--card); border:1px solid var(--border); border-radius:1rem; padding:.32rem .8rem; cursor:pointer; font-size:.76rem; color:var(--muted); font-family:inherit; transition:all .15s; }
    .chip:hover { border-color:var(--primary); color:var(--primary); }
    .chip.chip-active { background:var(--primary); border-color:var(--primary); color:#fff; }

    /* done-toggle circle on life-item cards */
    .life-check { width:24px; height:24px; border-radius:50%; border:2px solid var(--border); background:none; cursor:pointer; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:.8rem; color:#fff; transition:all .15s; }
    .life-check:hover { border-color:var(--success); }
    .life-check-on { background:var(--success); border-color:var(--success); }
    .day-card.life-done .dm-city { text-decoration:line-through; color:var(--muted); }

    /* category left-border accent (Trip/Work/Social/Vida) -- a separate axis from
       the .cc-* city colors, which stay exclusive to a trip's own Calendar tab */
    .cat-trip { border-left-color:var(--cat-trip); }
    .cat-work { border-left-color:var(--cat-work); }
    .cat-social { border-left-color:var(--cat-social); }
    .cat-vida { border-left-color:var(--cat-vida); }
    .cat-inbox { border-left-color:var(--cat-inbox); }

    .cat-dot { display:inline-block; width:.5rem; height:.5rem; border-radius:50%; flex-shrink:0; }
    .cat-dot.cat-trip { background:var(--cat-trip); }
    .cat-dot.cat-work { background:var(--cat-work); }
    .cat-dot.cat-social { background:var(--cat-social); }
    .cat-dot.cat-vida { background:var(--cat-vida); }
    .cat-dot.cat-inbox { background:var(--cat-inbox); }

    .cat-badge-trip { background:#dbeafe; color:#1d4ed8; }
    .cat-badge-work { background:#ede9fe; color:#6d28d9; }
    .cat-badge-social { background:#fce7f3; color:#be185d; }
    .cat-badge-vida { background:#cffafe; color:#0e7490; }
    .cat-badge-inbox { background:#e2e8f0; color:#334155; }

    /* ── UNIFIED CALENDAR: month grid ── */
    .cal-grid-nav { display:flex; align-items:center; justify-content:space-between; margin-bottom:.6rem; }
    .cal-grid-label { font-weight:700; font-size:.95rem; text-transform:capitalize; }
    .cal-grid-weekdays { display:grid; grid-template-columns:repeat(7,1fr); text-align:center; font-size:.6rem; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; margin-bottom:.3rem; }
    .cal-grid-body { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; background:var(--border); border:1px solid var(--border); border-radius:10px; overflow:hidden; margin-bottom:.7rem; }
    .cal-grid-cell { background:var(--card); min-height:52px; padding:.3rem; cursor:pointer; transition:background .12s; }
    .cal-grid-cell:hover { background:var(--bg); }
    .cal-grid-cell.cal-grid-outside { background:#f8fafc; }
    .cal-grid-cell.cal-grid-outside .cal-grid-daynum { color:var(--muted); opacity:.5; }
    .cal-grid-daynum { font-size:.75rem; font-weight:700; width:1.35rem; height:1.35rem; display:flex; align-items:center; justify-content:center; }
    .cal-grid-cell.cal-grid-today .cal-grid-daynum { background:var(--primary); color:#fff; border-radius:50%; }
    .cal-grid-dots { display:flex; flex-wrap:wrap; gap:2px; margin-top:.25rem; }
    .cal-grid-more { font-size:.55rem; color:var(--muted); }
    @media(max-width:480px){ .cal-grid-cell{min-height:38px;} }

    /* ── LOGIN ── */
    #login-view { display:none; min-height:100vh; align-items:center; justify-content:center; background:linear-gradient(135deg,#0f2044,#1e3a8a 55%,#1d4ed8); padding:1rem; }
    .login-card { background:#fff; border-radius:18px; padding:1.75rem; width:100%; max-width:380px; box-shadow:0 25px 50px rgba(0,0,0,.25); }
    .login-logo { text-align:center; margin-bottom:1.5rem; }
    .login-logo-ico { font-size:2.5rem; }
    .login-logo h2 { font-size:1.4rem; font-weight:800; color:var(--text); margin-top:.35rem; }
    .login-logo p { color:var(--muted); font-size:.84rem; margin-top:.25rem; }
    #login-msg { font-size:.82rem; text-align:center; margin-top:.6rem; min-height:1.2em; }
    #login-msg.err { color:var(--danger); }
    #login-msg.ok  { color:var(--success); }