/* ALYSSIUN Drive — atmosphere system.
   DEFAULT atmosphere is CERAMIC MIST (LUX): premium light/glass surfaces,
   precise hairline borders, restrained shadow, thin luxury type — never a
   generic white SaaS look, never purple, never cartoon. INFINITE VOID (NEO) is
   an OPTIONAL future atmosphere only, applied via [data-atmosphere="void"] —
   never the Phase 1 default. See docs/theme-rules.md + docs/brand-system.md. */
:root {
  /* Ceramic Mist (LUX) — the default first impression */
  --void: #ecebe4;          /* base surface */
  --void-2: #e2e0d7;        /* recessed surface (chips, thumbs) */
  --glass: rgba(255,255,255,0.50);
  --glass-2: rgba(255,255,255,0.78);
  --hair: rgba(20,20,26,0.10);
  --hair-2: rgba(20,20,26,0.20);
  --text: #16161c;
  --muted: #6c6c77;
  --ceramic: #efece6;
  --ceramic-ink: #14141a;
  --jade: #2f7d62;
  --danger: #c1473d;
  --radius: 4px;            /* sharp industrial radius (2–4px) */
  --radius-lg: 10px;
  --bg:
    radial-gradient(1100px 680px at 50% -240px, #fbfaf6 0%, rgba(236,235,228,0) 60%),
    var(--void);
  --nav-bg: rgba(238,236,229,0.72);
  --input: rgba(255,255,255,0.55);
  --primary: #16161c;
  --primary-ink: #f6f5f1;
  --primary-hover: #000;
  --card-shadow: 0 30px 70px -50px rgba(20,20,26,0.30);
  --thumb-shadow: 0 18px 36px -22px rgba(20,20,26,0.32);
  --alyssiun-os-launcher-clearance: calc(8.5rem + env(safe-area-inset-bottom, 0px));
  font-synthesis: none;
}

/* Infinite Void (NEO) — optional atmosphere; LUX remains the default. */
:root[data-theme="neo"],
:root[data-atmosphere="void"] {
  --void: #060608; --void-2: #0c0c11;
  --glass: rgba(255,255,255,0.035); --glass-2: rgba(255,255,255,0.06);
  --hair: rgba(255,255,255,0.09); --hair-2: rgba(255,255,255,0.16);
  --text: #f4f4f6; --muted: #8b8b97; --jade: #86e0c0; --danger: #e0726a;
  --bg: radial-gradient(1100px 680px at 50% -240px, #15151d 0%, rgba(6,6,8,0) 60%), var(--void);
  --nav-bg: rgba(6,6,8,0.7); --input: rgba(255,255,255,0.02);
  --primary: var(--ceramic); --primary-ink: var(--ceramic-ink); --primary-hover: #fff;
  --card-shadow: 0 40px 90px -50px rgba(0,0,0,0.9);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
html, body { max-width: 100%; overflow-x: hidden; }
html { scroll-padding-bottom: var(--alyssiun-os-launcher-clearance); }
body {
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  font-weight: 300;                 /* thin luxury default */
  color: var(--text);
  background: var(--bg);
  background-attachment: fixed;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
.muted { color: var(--muted); }

/* --- top bar --------------------------------------------------------------- */
.nav {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 18px;
  padding: 16px 28px;
  background: var(--nav-bg);
  backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid var(--hair);
}
.brand { font-size: 14px; font-weight: 600; letter-spacing: 0.42em; }
.brand small { font-weight: 300; letter-spacing: 0.2em; color: var(--muted); }
/* Theme-aware ALYSSIUN wordmark (LUX=black logo, NEO=white logo). */
.alyssiun-brand { display: inline-flex; align-items: center; gap: 9px; line-height: 1; }
.alyssiun-wordmark { display: block; height: 16px; width: 80px; background: url("https://drive.alyssiun.com/s/DuOcfsHxUfJVuAGj/alyssiun-name-000000.png") left center/contain no-repeat; }
:root[data-theme="neo"] .alyssiun-wordmark { background-image: url("https://drive.alyssiun.com/s/alyssiun/alyssiun-name-ffffff.png"); }
.alyssiun-appname { font-weight: 600; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.nav-spacer { flex: 1; }

/* --- layout ---------------------------------------------------------------- */
.shell { display: grid; grid-template-columns: 264px 1fr; min-height: calc(100% - 57px); }
.side {
  border-right: 1px solid var(--hair);
  padding: 22px 18px;
  background: var(--glass);
  backdrop-filter: blur(8px);
}
.side h6 {
  margin: 0 0 10px; font-size: 10px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted);
}
.main { padding: 38px 44px var(--alyssiun-os-launcher-clearance); max-width: 1100px; }
.page-title { font-size: 30px; font-weight: 200; margin: 0 0 4px; }
.page-sub { margin: 0 0 30px; color: var(--muted); font-size: 14px; }

/* --- project switcher ------------------------------------------------------ */
.proj-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 22px; }
.proj {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px; border-radius: var(--radius);
  border: 1px solid transparent; cursor: pointer; transition: all .14s ease;
  font-size: 14px;
}
.proj:hover { background: var(--glass-2); border-color: var(--hair); transform: translateY(-1px); }
.proj.active { background: var(--glass-2); border-color: var(--hair-2); }
.proj .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--jade); flex: none; }

/* --- cards / surfaces ------------------------------------------------------ */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; }
.card {
  background: var(--glass-2);
  border: 1px solid var(--hair);
  border-radius: var(--radius-lg);
  padding: 22px;
  box-shadow: var(--card-shadow);
}
.card h3 { margin: 0 0 6px; font-weight: 400; font-size: 16px; }
.stat { font-size: 26px; font-weight: 200; }

/* --- kinetic glass buttons ------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font: inherit; font-size: 13px; font-weight: 500; letter-spacing: 0.02em;
  padding: 10px 18px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--hair-2);
  background: var(--glass-2);
  backdrop-filter: blur(10px);
  color: var(--text);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--thumb-shadow); }
.btn.primary { background: var(--primary); color: var(--primary-ink); border-color: transparent; }
.btn.primary:hover { background: var(--primary-hover); }
.btn.danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, transparent); }
.btn.danger:hover { background: color-mix(in srgb, var(--danger) 12%, transparent); border-color: var(--danger); }

/* Inline validation message (e.g. a custom link that's already in use). Shown in
   red right under the field, with a matching outline on the offending input. */
.field-error { margin: 4px 0 0; font-size: 13px; color: var(--danger); overflow-wrap: anywhere; }
.select.is-error, input.is-error { border-color: var(--danger); }

.empty {
  border: 1px dashed var(--hair-2); border-radius: var(--radius-lg);
  padding: 48px; text-align: center; color: var(--muted);
}
.tag {
  display: inline-block; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted); border: 1px solid var(--hair); border-radius: var(--radius);
  padding: 3px 8px;
}

/* --- launch components ----------------------------------------------------- */
.badge {
  font-size: 11px; letter-spacing: 0.08em; padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--hair-2); color: var(--muted); user-select: none;
}
.badge.public { color: var(--jade); border-color: var(--jade); }
.badge.private { color: var(--text); }

.panel {
  background: var(--glass-2); border: 1px solid var(--hair);
  border-radius: var(--radius-lg); padding: 18px; box-shadow: var(--card-shadow);
}
.upload-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.select, input[type="file"] {
  font: inherit; font-size: 13px; color: var(--text);
  background: var(--input); border: 1px solid var(--hair-2);
  border-radius: var(--radius); padding: 9px 12px;
}
.select { cursor: pointer; }
input[type="file"] { flex: 1; min-width: 220px; }

.file {
  display: grid; grid-template-columns: 52px 1fr auto; gap: 14px; align-items: center;
  padding: 12px 14px; border: 1px solid var(--hair); border-radius: var(--radius-lg);
  background: var(--glass); margin-bottom: 10px;
}
.file .thumb {
  width: 52px; height: 52px; border-radius: var(--radius); object-fit: cover;
  background: var(--void-2); border: 1px solid var(--hair); box-shadow: var(--thumb-shadow);
}
.file .meta { min-width: 0; }
.file .name { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.file .sub { font-size: 11px; color: var(--muted); margin-top: 2px; }
.file .actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn.sm { padding: 6px 12px; font-size: 12px; }

.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: var(--primary); color: var(--primary-ink); padding: 11px 18px;
  border-radius: 999px; font-size: 13px; box-shadow: var(--card-shadow); z-index: 50;
}

/* Mobile: stack the sidebar above the main panel; keep file rows usable. */
@media (max-width: 720px) {
  .nav { padding: 14px 16px; gap: 10px; }
  #account-chip { display: none; }
  .shell { grid-template-columns: 1fr; }
  .side { border-right: none; border-bottom: 1px solid var(--hair); }
  .main { padding: 24px 18px; }
  .upload-row { flex-direction: column; align-items: stretch; }
  .upload-row .select, .upload-row .btn, .upload-row input[type="file"] { min-height: 44px; }
  .file { grid-template-columns: 44px 1fr; gap: 12px; padding: 14px; }
  .file .thumb { width: 44px; height: 44px; }
  /* Larger touch targets + roomy spacing for file actions on small phones. */
  .file .actions { grid-column: 1 / -1; gap: 10px; margin-top: 4px; }
  .file .actions .select, .file .actions .btn { flex: 1; min-width: 0; min-height: 44px; }
  .folder-chip { min-height: 40px; padding: 8px 14px; }
}

#usage { line-height: 1.7; }
.usage-title {
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 4px;
}
.usage-foot { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--hair); opacity: 0.8; }
.usage-bar {
  height: 6px; border-radius: 999px; background: var(--hair);
  overflow: hidden; margin: 4px 0 8px;
}
.usage-bar > span { display: block; height: 100%; background: var(--primary); border-radius: 999px; }

/* --- tabs ------------------------------------------------------------------ */
.tabs { display: flex; gap: 4px; margin: 22px 0 24px; border-bottom: 1px solid var(--hair); flex-wrap: wrap; }
.tab {
  font: inherit; font-size: 13px; font-weight: 400; color: var(--muted);
  background: none; border: none; border-bottom: 2px solid transparent;
  padding: 10px 14px; cursor: pointer; transition: color .14s, border-color .14s;
}
.tab:hover { color: var(--text); }
.tab.active { color: var(--text); border-bottom-color: var(--primary); font-weight: 500; }

/* --- filter bar + folders -------------------------------------------------- */
.filterbar { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.filterbar #f-search { flex: 1; min-width: 200px; }
.folder-rail { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.folder-chip {
  font-size: 12px; padding: 6px 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--hair-2); background: var(--glass); transition: all .14s;
}
.folder-chip:hover { transform: translateY(-1px); box-shadow: var(--thumb-shadow); }
.folder-chip.active { background: var(--primary); color: var(--primary-ink); border-color: transparent; }
.folder-chip .ct { opacity: 0.6; margin-left: 4px; }

/* --- developer panel + key reveal ------------------------------------------ */
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 5px; }
code, .mono {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12.5px;
  background: var(--void-2); border: 1px solid var(--hair); border-radius: var(--radius);
  padding: 3px 7px; word-break: break-all;
}
pre.mono { display: block; padding: 14px; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.6; }
.keyreveal { background: var(--void-2); border: 1px solid var(--hair-2); border-radius: var(--radius); padding: 12px; margin: 10px 0; }
.keyreveal .k { font-family: ui-monospace, Menlo, monospace; font-size: 13px; word-break: break-all; color: var(--jade); }

/* --- settings form --------------------------------------------------------- */
.form-row { display: grid; grid-template-columns: 200px 1fr; gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--hair); }
.form-row label { font-size: 13px; }
.list-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--hair); border-radius: var(--radius-lg); background: var(--glass); margin-bottom: 10px; }
.list-row .grow { flex: 1; min-width: 0; }
.list-row .name { font-size: 13px; }
.list-row .sub { font-size: 11px; color: var(--muted); margin-top: 2px; word-break: break-all; }

@media (max-width: 720px) {
  .form-row { grid-template-columns: 1fr; gap: 6px; }
  .list-row { flex-wrap: wrap; }
}