/* ==========================
   BRAND: TOKENS
   Centralized color, typography and component variables
   ========================== */
:root{
  /* Colors */
  --bg:#fff;
  --card:#ffffff;
  --card-2:#fafafa;
  --ink:#111;
  --ink-2:#222;
  --muted:#666;
  --line:#ececec;

  /* Brand + links */
  --brand:#000;
  --heading:#3a3a3a;     /* heading color */
  --link:#3b3b3b;
  --link-hover:#222;
  --link-bg:#828282;
  --link-bor:#96969655;

  /* Primary + semantic */
  --primary:#222222;
  --primary-bg:#0F172A;
  --primary-ink:#fff;
  --danger:#B91C1C;
  --danger-b:#FEE2E2;
  --danger-bg:#ffe9e9;
  /* success tones for pleasant "check" feedback */
  --success:#16a34a;         /* green-600 */
  --success-b:#b5e3c6;       /* light border */
  --success-bg:#ecfdf5;      /* subtle bg */
  --success-strong:#10b981;  /* brighter success (ready) */
  --success-strong-b:#0ea971;
  --success-ink:#166534;     /* readable green ink on light success bg */

  /* Chips */
  --chip:#eef;
  --chip-t:#224;

  /* Radii + elevation */
  --radius:14px;
  --radius-sm:8px;
  --shadow:0 1px 2px rgba(0,0,0,.05), 0 6px 24px rgba(0,0,0,.06);

  /* Typography (families) */
  --font-sans:'Inter', -apple-system, system-ui, Segoe UI, Roboto, Arial, sans-serif;
  --font-display:'Montserrat', 'Inter', -apple-system, system-ui, Segoe UI, Roboto, Arial, sans-serif;
  --font-mono:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Buttons (tokens) */
  --btn:#000000;        /* default button bg */
  --btn-h:#f6f7f8;      /* hover bg for neutral buttons */
  --btn-hover:#3b3b3b;  /* hover bg for solid neutral buttons */
  --btn-b:#000000;      /* default border */
  --btn-radius: var(--radius-sm);
  --btn-py: 8px;
  --btn-px: 12px;
  --btn-fs: 14px;
  --btn-ink:#fff;       /* text color for solid buttons */

  /* Nav (tweakable) */
  --nav-bg:#fff;
  --nav-ink:#000;
  --nav-border: var(--line);
  --nav-logo-h: 50px;
  --nav-shadow: var(--shadow);
  --nav-blur: 0px;             /* e.g., 6px for glassy */
  --nav-menu-bg:#fff;
  --nav-menu-ink:#000;
  --nav-menu-hover-bg:#f3f4f6;
  --nav-active-bg:#000;
  --nav-active-ink:#fff;

  /* Visual notch used by primary button variant */
  --btn-notch: 12px;
}
.header-green {
  color:#4bda74;
}
.header-purple {
  color:#ab5de3;
}
.header-cyan {
  color:#45d4e7;
}
.big-btn {
    font-size: 18px!important;
    font-weight: 800;
    padding: 20px 30px!important;
}
.card.no-bg {
    background: unset;
    box-shadow: none;
    border: none;
}

* { box-sizing:border-box; }
html,body { height:100%; }
/* ==========================
   BRAND: BASE TYPOGRAPHY
   ========================== */
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
/* Headings: display font + brand color */
h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); color: var(--heading); }

/* Links */
a { color: var(--link); }
a:hover { color: var(--link-hover); }



/* select-plan-page */
.select-plan-wrapper {
    display: grid;
    grid-template-rows: auto;
    place-content: center;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 10px;
    width: fit-content;
    margin: 0 auto;
}
.select-plan-header {
  font-weight: 800;
}
.select-plan-argument, .select-plan-footer {
  border-top: 1px solid var(--line);
}
.grid-padding {
  padding: 10px 20px;
}
.info-trial, .safety {
  margin-top: 20px;
  margin: 0 auto;
}
.select-plan-footer {
  display: grid;
  grid-template-columns: auto auto;
  gap: 10px;
  padding-bottom:unset;
  padding-top: 20px;
}
.select-plan-footer div {
  display: grid;
  place-items: center;
}
.select-plan-footer a {
  width: 100%;
  text-align: center;
}

/* ==========================
   BRAND: COMPONENTS — Buttons
   (kept simple to avoid breaking existing styles)
   ========================== */
.btn{
  display:inline-block;
  padding:var(--btn-py) var(--btn-px);
  border:1px solid var(--btn-b);
  background:var(--btn);
  border-radius:var(--btn-radius);
  text-decoration:none;
  color:var(--btn-ink);
  font-size:var(--btn-fs);
  line-height:1;
  min-height: 36px; /* default medium touch target */
  transition:all .15s ease;
  cursor: pointer;
}
.select-plan-btn {
  background-color: var(--success-b);
  color:var(--success-ink);
  border-color: var(--success-strong-b);
  display: grid!important;
  place-items: center;
  font-weight: 800;
  text-transform: uppercase;
  grid-template-rows: auto auto auto;
  gap: 6px;
}
.select-plan-btn:hover {
  background-color: var(--success-strong)!important;
  color: white;
  border-color: var(--success-strong-b);
} 
.btn:hover{ background: var(--btn-hover); }
.btn:focus{ outline:3px solid rgba(11,97,214,.2); outline-offset:2px; }
.btn.primary{
  background:var(--primary-bg);
  color:var(--primary-ink);
  border-color:var(--primary-bg);
  transition: background .2s;
  border-radius: 0;                         /* construction look */
  padding-right: calc(16px + var(--btn-notch));
  /* diagonal cut-out on bottom-right */
  -webkit-clip-path: polygon(0 0,
                    100% 0,
                    100% calc(100% - var(--btn-notch)),
                    calc(100% - var(--btn-notch)) 100%,
                    0 100%);
  clip-path: polygon(0 0,
                    100% 0,
                    100% calc(100% - var(--btn-notch)),
                    calc(100% - var(--btn-notch)) 100%,
                    0 100%);
  position: relative; /* for arrow */
}
.btn.primary:hover{ filter:brightness(.95); }
.btn.primary::after{
  content: "\2192"; /* → */
  display: inline-block;
  margin-left: 8px;
  opacity: .95;
  transition: transform .18s ease, opacity .18s ease;
}
.btn.primary:hover::after{ transform: translateX(3px); opacity: 1; }
@media (prefers-reduced-motion: reduce){
  .btn.primary::after{ transition: none; }
}
.btn.success{ background: var(--success); border-color: var(--success); color:var(--btn-ink); }
.btn.success:hover{ filter: brightness(.95); }
.btn-danger{ border-color:var(--danger-b); color:var(--danger); background:var(--card); }
.btn-danger:hover{ background:var(--danger-bg); }

/* Sizes */
.btn-md { --btn-py: 8px;  --btn-px: 12px; --btn-fs: 14px; --btn-radius: var(--radius-sm); min-height: 36px; }
.btn-sm, .btn.sm, .btn.small { --btn-py: 6px;  --btn-px: 10px; --btn-fs: 13px; --btn-radius: var(--radius-sm); min-height: 30px; }
.btn-lg { --btn-py: 12px; --btn-px: 16px; --btn-fs: 16px; --btn-radius: 18px; min-height: 42px; }
/* Ensure the HTML hidden attribute actually hides elements, even with author styles */
[hidden]{ display:none !important; }
.msg.assistant .bubble ul {
      padding-inline-start: 20px !important;
}

/* ---------- LAYOUT ---------- */

.wrap{
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:24px;
  max-width: 1024px;
  margin:0 auto;
  margin-top:80px;
}


.content{
  min-height: 79vh;
}
.content h1 { margin:0 0 12px; font-size:32px; letter-spacing:.2px; }
.content h2 { margin:0 0 10px; font-size:22px; }
.content h3 { margin:10px 0;  font-size:18px; }

.card{
  background:var(--card-2);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:16px;
  margin:16px 0;
}

/* ---------- People / Members ---------- */
.people-card .card-title{ margin:0; }
.people-editor{
  margin-top:10px;
  display:grid;
  width:100%;
  grid-template-columns: 2fr 1fr 1fr 1fr auto;
  gap:8px;
  align-items:center;
}

/* make form controls fill their grid cells and prevent overflow */
.people-editor input,
.people-editor select,
.people-editor .actions {
  width:100%;
  min-width:0;
}
.people-editor .phone-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    font-size: 14px;
    background: #fff;
    color: var(--ink);
    transition: border-color .15s ease, box-shadow .15s ease;
}
/* keep actions aligned nicely */
.people-editor .actions { display:flex; gap:8px; justify-content:flex-end; }

@media (max-width: 760px){
  .people-editor{ grid-template-columns: 1fr; }
  .people-editor .actions{ justify-content:flex-start; }
}
@media (max-width: 760px){ .people-editor{ grid-template-columns: 1fr; } }
.people-card .sep{ border:0; border-top:1px solid var(--line); margin:12px 0; }
.people-row{ display:grid; grid-template-columns: 1.5fr 1.2fr 1fr auto; gap:8px; align-items:center; padding:10px 0; border-bottom:1px solid var(--line); }
@media (max-width: 760px){ .people-row{ grid-template-columns: 1fr; align-items:stretch; } }
.people-row .meta{ display:flex; align-items:center; gap:10px; }
.people-row .meta .title{ font-weight:600; }
.people-row .meta .sub{ font-size:12px; color:var(--muted); }
.people-row .actions{ display:flex; gap:8px; justify-content:flex-end; }
.people-row .spacer{ display:block; }
.people-row .in{ width:100%; }
.avatar-circle{ width:32px; height:32px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:12px; letter-spacing:.3px; text-transform:uppercase; }
.project-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.project-button-actions {
  display: flex;
  gap: 8px;
}

.project-button-actions form {
  margin: 0;
}

/* Project delete confirm UI */
.project-delete { position: relative; }

/* Simple confirm modal */
.confirm-modal[hidden]{ display:none !important; }
.confirm-modal{ position: fixed; inset:0; z-index: 3000; display:flex; align-items:center; justify-content:center; }
.confirm-modal__backdrop{ position:absolute; inset:0; background: rgba(0,0,0,.35); }
.confirm-modal__dialog{ position:relative; background:#fff; border-radius:12px; border:1px solid var(--line); box-shadow:var(--shadow); padding:16px; width:min(520px, 92vw); z-index:1; }
.confirm-modal__head{ font-weight:800; font-size:18px; margin-bottom:8px; }
.confirm-modal__body{ font-size:14px; color:#7f1d1d; background:#fee2e2; border:1px solid #fecaca; padding:10px 12px; border-radius:8px; margin-bottom:12px; }
.confirm-modal__check{ display:block; margin-top:8px; color:#111; background:#fff; border:0; }
.confirm-modal__actions{ display:flex; gap:10px; justify-content:flex-end; }

/* Project card head layout */
.project-card .card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.project-card .card-head h2 {
  margin: 0;
}

/* Summary chips inline, wrap if needed */
.project-summary {
  display: flex;
  gap: 8px;
  align-items: center;
  flex: 1 1 auto;
  min-width: 240px;
}

.project-summary .chip.link {
  text-decoration: none;
}

.project-head-actions{ display:flex; align-items:center; gap:12px; }
.cost-ticker{ 
  background: #fee2e2;
  color: #991b1b; 
    border: 1px solid #e7c0c0;
    text-decoration: none;
    padding: 3px 8px;
    border-radius: 20px;
  font-size:12px;
}
.cost-ticker:hover{ text-decoration:underline; }

/* Collapsible body */
.project-card .project-body {
  overflow: hidden;
  transition: max-height 220ms ease, padding-top 160ms ease, padding-bottom 160ms ease;
  max-height: 2000px; /* large enough to fit content when expanded */
}

.project-card.is-collapsed .project-body {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  max-height: 0;
  display: none;
}

/* Optional: hide verbose help when collapsed for extra compactness */
.project-card.is-collapsed .help {
  display: none;
}

/* Gantt card collapse (mirrors project-card pattern) */
.gantt-card .card-head {
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:8px;
}
.gantt-card .ai-plan-inline{ font-size:13px; color: var(--muted); font-weight:400; }
.gantt-card .gantt-body {
  overflow:hidden;
  transition:max-height 220ms ease, padding-top 160ms ease, padding-bottom 160ms ease;
  max-height:2000px;
}
.gantt-card.is-collapsed .gantt-body {
  padding-top:0 !important; padding-bottom:0 !important; max-height:0; display:none;
}

/* --- Assistant loader animation (Tasks autoscheduler) --- */
.agent-step .loader .msg{display:inline-block;min-height:1.2em}
.agent-step .btn.primary{ background: var(--success,#16a34a); border-color: var(--success,#16a34a); color: var(--btn-ink); }
.agent-step .btn.primary:hover{ filter: brightness(0.95); }
.slide-in{animation:tsSlideIn .35s ease forwards}
.slide-out{animation:tsSlideOut .35s ease forwards}
@keyframes tsSlideIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@keyframes tsSlideOut{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-6px)}}
.agent-row{display:grid;gap:8px;grid-template-columns:repeat(3,minmax(120px,1fr));align-items:start}
@media (max-width: 760px){ .agent-row{ grid-template-columns: repeat(2, minmax(120px, 1fr)); } }
.agent-chip{display:flex;align-items:center;gap:6px;padding:4px 8px;border:1px solid #eee;border-radius:16px;background:#fafafa;transition:transform .2s ease, background .2s ease, border-color .2s ease}
.agent-chip.active{background:var(--success-bg,#ecfdf5);border-color:var(--success-b,#b5e3c6);transform:scale(1.04)}

/* Scheduler caps autosave feedback */
tr.caps-saved td{ background: var(--success-bg,#ecfdf5); transition: background .8s ease; }
tr.caps-error td{ background: #fee2e2; }

/* ---------- NAV ---------- */

.nav{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: var(--nav-bg);
  color: var(--nav-ink);
  z-index: 2000;
  border-bottom: 1px solid var(--nav-border);
  backdrop-filter: var(--nav-blur);
}
.nav .nav-wrapper{
  max-width: 1024px;
  margin: 0 auto;
  padding: 8px 16px;
  position: relative;
}
.nav .nav-buttons{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.nav .brand img{ height: var(--nav-logo-h); width: auto; }

/* Hamburger button */
.nav-toggle{
  display: inline-grid;
  place-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 8px;
  cursor: pointer;
  }
.nav-toggle:hover{ background: var(--nav-menu-hover-bg); }
.nav-toggle:focus{ outline:3px solid rgba(11,97,214,.2); outline-offset:2px; }
.nav-toggle .bar{ 
  display:block; 
  width:25px; 
  height:3px; 
  background:#3a3a3a; 
  margin:3px 0; border-radius:0; }
.nav-toggle{ position: relative; }


/* Dropdown menu */
.nav-menu[hidden]{ display:none; }
.nav-menu{
  position: absolute;
  right: 16px;
  top: calc(100% + 8px);
  background: var(--nav-menu-bg);
  border:1px solid var(--nav-border);
  box-shadow: var(--shadow);
  min-width: 380px;
  max-width: 360px;
  padding: 6px;
}
.nav-menu a{
  display:block;
  text-decoration:none;
  color: var(--nav-menu-ink);
  padding:10px 12px;
  border-radius:8px;
  font-family:'Inter', -apple-system, system-ui, Segoe UI, Roboto, Arial, sans-serif;
  font-weight:500; /* medium */
}
.nav-menu a:hover{ background: var(--nav-menu-hover-bg); }
.nav-menu a.active{ background: var(--nav-active-bg); color: var(--nav-active-ink); }

/* Compact state (optional, toggled via JS) */
.nav.is-compact .nav-wrapper { padding: 4px 12px; }
.nav.is-compact .brand img { height: calc(var(--nav-logo-h) - 8px); }

/* Removed nav notifications styles */

/* ---------- USER RAIL (left of menu) ---------- */
.user-rail{
  position: fixed;
  left: 8px;
  top: 72px; /* below nav */
  display: grid;
  gap: 10px;
  z-index: 1500;
}
.user-rail__avatar{
  width: 44px; height: 44px; display: grid; place-content: center; text-decoration:none;
  border-radius: 50%; border:1px solid var(--line); overflow:hidden; background:#fff; color:#000;
}
.user-rail__avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.user-rail__initial{ font-weight:700; font-size:14px; }
.user-rail__bell{
  width: 44px; height: 44px; border-radius:50%; border:1px solid var(--line); background:#fff; display:grid; place-content:center; position:relative; cursor:pointer;
}
.user-rail .badge{
  position:absolute; right:-4px; top:-4px; background:#e11d48; color:#fff; border-radius:999px; padding:2px 6px; font-size:11px; border:2px solid #fff;
}
.user-rail__toggle{ display:flex; gap:8px; align-items:center; font-size:12px; color:#222; background:#fff; border:1px solid var(--line); border-radius:12px; padding:6px 8px; }
.user-rail__toggle input{ accent-color:#000; }
.user-rail__panel{
  background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); min-width:200px; padding:8px; 
}
.user-rail .panel__head{ font-weight:600; margin-bottom:6px; }
.user-rail .panel__body{ font-size:13px; display:grid; gap:6px; }

@media (max-width: 920px){ .user-rail{ display:none; } }

.center { text-align:center; }
/* inline form containers (for file actions) */
.inline-form {
  display: inline;   /* eller inline-block */
  margin: 0;
  padding: 0;
}
.actions .btn{ margin:0 6px 6px 0; }

/* ---------- pages ---------- */
.login-page .wrap .content, .register-page .wrap .content {
  display: grid;
  place-content: center;
}
.start-page .wrap {
  background: transparent;
  box-shadow: none;
  max-width: none;        /* full-width sections */
  padding: 0;             /* sections handle their own padding */
  border-radius: 0;
  position: relative;     /* ensure content stacks above background animation */
  z-index: 1;
}
.start-hero { min-height: 62vh; display: grid; place-items: center; text-align: center; }
.start-hero h1 { font-size: 32px; margin: 0 0 8px; }
.start-hero .muted { font-size: 14px; }
.start-hero .btn { --btn-py: 12px; --btn-px: 16px; --btn-radius: 18px; --btn-fs: 16px; }

/* ---------- Admin FAB (go-to-admin) ---------- */
.admin-fab{
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 2500;
  display: inline-flex; /* toggled by JS; start as none inline-style */
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  text-decoration: none;
  color: #fff;
  background: linear-gradient(135deg, #111 0%, #3b3b3b 100%);
  box-shadow: 0 6px 16px rgba(0,0,0,.18), 0 2px 6px rgba(0,0,0,.12);
  border: 1px solid rgba(255,255,255,.08);
  font-weight: 700;
  letter-spacing: .3px;
}
.admin-fab::before{ content:'⚙️'; }
.admin-fab:hover{ filter: brightness(1.05); transform: translateY(-1px); }
@media (prefers-reduced-motion: no-preference){
  .admin-fab{ transition: filter .15s ease, transform .15s ease, box-shadow .2s ease; }
}

/* ==========================
   Landing Page (Start) CSS
   ========================== */

/* Generic full-width section; content is centered via .lp-container */
.lp-section { width: 100%; padding: 40px 12px; }
.lp-container { width: 100%; max-width: 1024px; margin: 0 auto; }

/* Two-column grid, stacks on small screens */
.lp-grid-2 { display: grid; grid-template-columns: 1.2fr 1fr; gap: 24px; align-items: center; min-height: 400px; }
@media (max-width: 860px){ .lp-grid-2 { grid-template-columns: 1fr; } }

/* Hero */
.lp-hero { padding-top: 56px; padding-bottom: 56px; }
.lp-hero h1 { font-size: clamp(28px, 4vw, 42px); line-height: 1.1; margin: 0 0 10px; }
.lp-hero p  { font-size: 16px; color: var(--ink-2); margin: 0 0 16px; }
.lp-hero .lp-img { width: 100%; height: auto; display: block; }

/* Hero demo (assistant + mini gantt) */
.lp-demo{
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  padding:12px;
  min-height:260px;
  display:flex;
  flex-direction:column;
  gap:10px;
  position:relative;
  overflow:hidden;
}
.lp-demo__chat{ display:flex; align-items:flex-start; gap:10px; }
.lp-demo__avatar{ width:40px; height:40px; border-radius:50%; object-fit:cover; border:1px solid var(--line); background:#fff; }
.lp-demo__bubble{ flex:1; background:#fff; border:1px solid var(--line); border-radius:10px; padding:8px 10px; }
.lp-demo__meta{ display:flex; align-items:center; gap:8px; margin-bottom:4px; }
.lp-demo__name{ font-weight:700; }
.lp-demo__text{ min-height: 1.2em; opacity:1; transition: opacity .5s ease; }
.lp-demo__text.out{ opacity:0; }
.lp-demo__dots{ display:inline-flex; gap:4px; margin-top:4px; }
.lp-demo__dots span{ width:6px; height:6px; border-radius:50%; background:#bbb; display:inline-block; animation:bounce .9s ease-in-out 1 both; }
.lp-demo__dots span:nth-child(2){ animation-delay: .15s; }
.lp-demo__dots span:nth-child(3){ animation-delay: .3s; }
@keyframes bounce{ 0%,80%,100%{ transform:scale(.6); opacity:.6 } 40%{ transform:scale(1); opacity:1 } }

.lp-demo__gantt{
  position:relative;
  flex:1;
  border:1px dashed var(--line);
  border-radius:10px;
  background:
    linear-gradient(to right, rgba(0,0,0,.02) 1px, transparent 1px) 0 0 / 24px 100%,
    linear-gradient(to bottom, rgba(0,0,0,.03) 1px, transparent 1px) 0 0 / 100% 24px;
}
.lp-bar{
  position:absolute;
  left: var(--left, 0%);
  width: 0%;
  height: 18px;
  background: var(--bar-bg, #e6f0ff);
  border:1px solid var(--bar-bor, #cfe2ff);
  border-radius:6px;
  overflow:hidden;
  opacity: 1;
  transition: width .7s ease, opacity .6s ease;
  display:flex; align-items:center;
}
.lp-bar.in{ width: var(--width, 30%); }
.lp-bar.out{ opacity: 0; }
.lp-bar .lb{ font-size:12px; color:#17335b; padding:0 8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Argument (quotes) */
.lp-argument { background: #ede4ae5e; color: #3a3a3a; padding-top: 56px; padding-bottom: 56px; }
.lp-argument .lp-title { font-size: 22px; margin: 0 0 16px; opacity: .9; }
.lp-quotes { position: relative; min-height: 120px; }
.lp-quote { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 10px; opacity: 0; animation: lpQuote 20s linear infinite; }
.lp-quote q { font-size: clamp(16px, 2.3vw, 22px); line-height: 1.4; quotes: "\201C" "\201D" "\2018" "\2019"; font-weight: 800; }
.lp-quote q:before { content: open-quote; }
.lp-quote q:after  { content: close-quote; }
.lp-quote .who { margin-top: 8px; font-size: 13px; opacity: .85; }

/* Stagger 5 rotating quotes */
.lp-quote:nth-child(1){ animation-delay: 0s; }
.lp-quote:nth-child(2){ animation-delay: 4s; }
.lp-quote:nth-child(3){ animation-delay: 8s; }
.lp-quote:nth-child(4){ animation-delay: 12s; }
.lp-quote:nth-child(5){ animation-delay: 16s; }
/* Rotate continuously; use same keyframes for all */
.lp-quote:nth-child(5){ animation-name: lpQuote; }

@keyframes lpQuote {
  0%    { opacity: 0; transform: translateY(6px); }
  5%    { opacity: 1; transform: translateY(0); }
  19%   { opacity: 1; transform: translateY(0); }  /* hold a bit less */
  24%   { opacity: 0; transform: translateY(-6px); }/* fade out earlier to avoid overlap */
  100%  { opacity: 0; }
}
@keyframes lpQuoteLast {
  0%    { opacity: 0; transform: translateY(6px); }
  5%    { opacity: 1; transform: translateY(0); }
  100%  { opacity: 1; transform: translateY(0); }
}

/* Feature sections */
.lp-feature { padding-top: 48px; padding-bottom: 48px; }
.lp-feature h2 { margin: 0 0 10px; font-size: clamp(22px, 3vw, 32px); }
.lp-feature p  { margin: 0 0 12px; font-size: 15px; color: var(--ink-2); }
.lp-feature .lp-img { width: 100%; height: auto; display: block; }
.lp-ph { width: 100%; aspect-ratio: 1 / 1; background: #e5e7eb; }

/* Upload demo */
.lp-demo-upload{
  background:#fff; border:1px solid var(--line); border-radius:12px; padding:12px; min-height:220px; display:flex; flex-direction:column; gap:10px; position:relative; overflow:hidden;
}
.lp-demo-upload .lp-up-drop{
  display:grid; place-items:center; text-align:center; padding:26px; border:2px dashed var(--line); border-radius:12px; color:var(--ink-2);
}
.lp-demo-upload .lp-up-file{
  display:grid; grid-template-columns: 64px 1fr; gap:12px; align-items:center; border:1px solid var(--line); border-radius:10px; padding:10px; background:#fff;
}
.lp-demo-upload .thumb-fallback{ width:64px; height:64px; border:1px solid var(--line); border-radius:8px; display:grid; place-content:center; font-weight:700; color:#17335b; background:#eef3ff; }
.lp-demo-upload .meta .name{ font-weight:600; margin-bottom:6px; }
.lp-demo-upload .status{ display:flex; align-items:center; gap:6px; color:var(--muted); font-size:13px; margin-bottom:4px; }
.lp-demo-upload .status .dot{ width:8px; height:8px; border-radius:50%; background:#cbd5e1; display:inline-block; }
.lp-demo-upload .bar{ width:100%; height:8px; border-radius:6px; background:#f3f4f6; border:1px solid var(--line); overflow:hidden; }
.lp-demo-upload .bar .fill{ display:block; height:100%; width:0%; background: linear-gradient(90deg, #a5b4fc, #93c5fd); transition: width .18s ease; }

.lp-demo-upload .lp-up-chat{ display:flex; gap:10px; align-items:flex-start; }
.lp-demo-upload .lp-up-chat .avatar{ width:36px; height:36px; border-radius:50%; border:1px solid var(--line); object-fit:cover; background:#fff; }
.lp-demo-upload .lp-up-chat .bubble{ flex:1; background:#fff; border:1px solid var(--line); border-radius:10px; padding:8px 10px; }
.lp-demo-upload .lp-up-chat .meta{ margin-bottom:4px; }
.lp-demo-upload .lp-up-chat .name{ font-weight:700; }
.lp-demo-upload .lp-up-chat .text{ white-space:pre-wrap; min-height:2.4em; }
.lp-demo-upload .lp-up-chat .dots{ display:inline-flex; gap:4px; margin-top:4px; }
.lp-demo-upload .lp-up-chat .dots span{ width:6px; height:6px; border-radius:50%; background:#bbb; display:inline-block; animation:bounce .9s ease-in-out 1 both; }
.lp-demo-upload .lp-up-chat .dots span:nth-child(2){ animation-delay: .15s; }
.lp-demo-upload .lp-up-chat .dots span:nth-child(3){ animation-delay: .3s; }

/* Weekly email demo */
.lp-demo-mail{ background:#fff; border:1px solid var(--line); border-radius:12px; padding:12px; min-height:220px; display:flex; flex-direction:column; gap:10px; }
.lp-demo-mail .mail-head{ display:flex; gap:10px; align-items:center; border-bottom:1px solid var(--line); padding-bottom:8px; }
.lp-demo-mail .mail-head .avatar{ width:36px; height:36px; border-radius:50%; border:1px solid var(--line); object-fit:cover; }
.lp-demo-mail .mail-head .from{ font-weight:700; }
.lp-demo-mail .mail-head .addr{ color:var(--muted); font-weight:400; margin-left:6px; }
.lp-demo-mail .mail-head .subj{ font-size:13px; color:var(--muted); }
.lp-demo-mail .mail-body{ font-size:14px; line-height:1.5; min-height:150px; position:relative; }
.lp-demo-mail .mail-body .line{ white-space:pre-wrap; }
.lp-demo-mail .mail-body.fadeout{ opacity:0; transition: opacity .5s ease; }
.lp-demo-mail .mail-body .mail-btn { padding: 2px 4px;
    border-radius: 3px; min-height: unset;}


/* Utility spacing */
.lp-spacer { height: 12px; }

/* Footer (public only) */
.site-footer { width: 100%; background: #fafafa; color: #3b3b3b; padding: 22px 12px; }
.site-footer a { color: #3b3b3b; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer__grid { display: grid; grid-template-columns: 1.2fr 1fr auto; gap: 16px; align-items: center; }
@media (max-width: 860px){ .site-footer__grid { grid-template-columns: 1fr; text-align:center; } }
.site-footer__brand { display: grid; gap: 4px; align-content: start; justify-items: start; }
@media (max-width: 860px){ .site-footer__brand { justify-items: center; } }
.site-footer__logo { height: 28px; width: auto; display: block; }
.site-footer__tag { font-size: 12px; opacity: .85; }
.site-footer__links { display: grid; grid-auto-flow: column; gap: 12px; justify-content: center; }
@media (max-width: 860px){ .site-footer__links { grid-auto-flow: row; } }
.site-footer__copy { font-size: 12px; opacity: .8; text-align: right; }
@media (max-width: 860px){ .site-footer__copy { text-align: center; } }
.login-page .wrap, .register-page .wrap {
  background: url("/static/images/starter-bg.webp");
  background-size: cover;
  background-position: center;
  max-width: unset;
  margin-top:unset;
  width: 100%;
  height: 100%;
}
.full-width-wrapper {
  width: 100%;
  padding: 20px;
  border-radius: 10px;
  display: grid;
  place-content: center;
  height: 80vh;
}
.full-width-wrapper form {
 min-width: 400px;
}
@media (max-width: 860px){
.full-width-wrapper form {
 min-width: 330px;
}
}



/* ---------- Auth animated background ---------- */
.auth-bg { display: none; }

/* Upload-specific: make buttons chip-like and smaller; use success/danger palette */
.upload-page .btn.sm,
.upload-page .btn.small {
  --btn-py: 4px;
  --btn-px: 10px;
  --btn-fs: 12px;
  --btn-radius: 999px;
  min-height: 24px;
}
.upload-page .btn.primary {
  /* chip look instead of notched block */
  -webkit-clip-path: none;
  clip-path: none;
  padding-right: var(--btn-px);
  border-radius: 999px;
  /* success coloring */
  background: var(--success);
  border-color: var(--success);
  color: var(--btn-ink);
}
.upload-page .btn.primary::after { display: none; }
.upload-page .btn.btn-danger,
.upload-page .btn-danger {
  border-radius: 999px;
  background: var(--danger-bg);
  border-color: var(--danger-b);
  color: var(--danger);
}
.start-page .auth-bg {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 0; /* behind content but above body background */
  pointer-events: none;
  /* subtle dotted paper look (neutral grayscale) */
  background:
    radial-gradient(rgba(0,0,0,.06) 1px, transparent 1px) 0 0 / 22px 22px,
    radial-gradient(rgba(0,0,0,.045) 1px, transparent 1px) 11px 11px / 22px 22px;
}
.auth-bg__svg { width:100%; height:100%; shape-rendering:geometricPrecision; }
.auth-bg .dots circle {
  fill: rgba(159, 159, 159, 0.55);
  opacity: .1;                 /* toned-out by default */
  transition: opacity 180ms ease;
}
.auth-bg .dots circle.is-active { opacity: .9; }

/* Single dotted segment + measurement label */
.auth-bg .lines .segment {
  fill: none;
  stroke: rgba(159, 159, 159, 0.55);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  /* dotted look */
  stroke-dasharray: 2 10;
  /* travel illusion */
  animation: segInOut 2400ms ease-in-out both, dashMove 900ms linear infinite;
}

/* Finished state: keep visible and stop animating */
.auth-bg .lines .segment.is-final { animation: none; opacity: 1; }

.auth-bg .measure {
  fill: rgba(159, 159, 159, 0.55);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .3px;
  text-anchor: middle;
  opacity: 0;
  transform: translateY(4px);
  paint-order: stroke;
  stroke: rgba(255,255,255,.85);
  stroke-width: 3px; /* soft halo for legibility */
  animation: measureInOut 2200ms ease-in-out both;
}

.auth-bg .measure.is-final { animation: none; opacity: 1; transform: translateY(0); }

@keyframes segInOut { 0%{opacity:0} 10%{opacity:1} 90%{opacity:1} 100%{opacity:0} }
@keyframes dashMove { to { stroke-dashoffset: -12; } }
@keyframes dotPulse { 0%,100% { opacity: .35; } 50% { opacity: .8; } }

@keyframes measureInOut {
  0%   { opacity: 0; transform: translateY(6px); }
  15%  { opacity: 1; transform: translateY(0); }
  80%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-2px); }
}

@media (prefers-reduced-motion: reduce) {
  .auth-bg .lines .segment,
  .auth-bg .dots circle,
  .auth-bg .measure {
    animation: none !important;
  }
}

/* ---------- FORMS ---------- */

.vision-preview {
  max-width: 100%;
  height: auto;
}

.form{
    width: 100%;
    min-width: auto;
}
.form .field{
  margin:10px 0 14px;
}
label{
  display:block;
  font-size:14px;
  color:var(--ink-2);
  margin:0 0 6px;
}
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
textarea,
select{
  width:100%;
  padding:10px 12px;
  border:1px solid #e5e7eb;
  border-radius:0px;
  font-size:14px;
  background:#fff;
  color:var(--ink);
  transition:border-color .15s ease, box-shadow .15s ease;
}
textarea{ min-height:130px; resize:vertical; }
input:focus, textarea:focus, select:focus{
  outline:none;
  border-color:var(--link-bor);
  box-shadow:0 0 0 3px rgba(11,97,214,.15);
}

.form .actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:8px;
}

/* ==========================
   Billing Select page – plan grid + logos
   ========================== */
.select-plan-wrapper{ background:#fafafa; border:1px solid var(--line); border-radius:14px; overflow:hidden; }
.select-plan-header{ font-weight:700; padding-top:16px; padding-bottom:6px; color:var(--heading); text-align:center;  }
.select-plan-argument{ color:var(--muted); font-size:14px; }
.select-plan-footer{ display:flex; gap:18px; padding-top:12px; padding-bottom:16px; align-items:center; }
.select-plan-footer > div{ flex:1; min-width:260px; }
.select-plan-btn{ min-width:260px; display:block; text-align:center; }
.select-plan-btn .plan-line1{ display:block; font-weight:700; }
.select-plan-btn .plan-line2{ display:block; font-size:xx-large; opacity:.95; 
border-top: 1px solid var(--success);
    padding-top: 6px;}
.grid-padding{ padding-left:16px; padding-right:16px; }
.info-trial{ margin-top:12px; }
.pm-logos{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:center; margin-top:6px; color:var(--muted); }
.pm-logos .powered{ font-weight:600; margin-right:4px; color:#555; }
.logo-pill{ display:inline-flex; align-items:center; padding:4px 10px; border:1px solid var(--line); border-radius:999px; font-size:12px; background:#fff; color:#333; }
.pm-logos .pm-icon{ height:18px; width:auto; display:inline-block; opacity:.95; filter: grayscale(10%); }
.stripe-logo{ height:16px; width:auto; fill:#111; opacity:.95; }

/* lightweight notice/toast */
.notice{ padding:10px 12px; border-radius:8px; border:1px solid #e5e7eb; margin:0 0 10px; font-size:14px; }
.notice.success{ background:#ecfdf5; border-color:#b5e3c6; color:#166534; }

/* Auth forms: stack primary and show muted secondary links */
.login-page .form .actions,
.register-page .form .actions{
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}
.login-page .form .actions .btn,
.register-page .form .actions .btn{
  width:100%;
  display:block;
  text-align:center;
  padding:12px 16px;
  border-radius: 18px;
}
.sub-actions{
  display:flex;
  gap:16px;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  margin-top:6px;
}
.muted-link{
  color:var(--muted);
  background:#fafafa;
  border:0;
  padding:5px;
  font:inherit;
  cursor:pointer;
  max-width: max-content;
  text-decoration: none;
}
.muted-link:hover{ color:#444; }

/* small “helpers” under fields */
.help{ font-size:12px; color:var(--muted); margin-top:4px; }

/* alerts/messages */
.alert{ border:1px solid #e2e8f0; background:#f8fafc; color:#0f172a; padding:10px 12px; border-radius:8px; margin:8px 0 12px; font-size:14px; }
.alert.success{ border-color:#a7f3d0; background:#ecfdf5; color:#065f46; }
.alert.error{ border-color:#fecaca; background:#fef2f2; color:#991b1b; }

/* ---------- FILE LIST (CSS Grid) ---------- */

.file-list{
  display: grid;
  gap: 12px;
  margin-top: 10px;
}
.file-item-wrapper{
  display: grid;
  grid-template-columns: min-content auto; /* två kolumner */
  gap: 12px;
    padding:16px;
  border:1px solid var(--line);
  border-radius: var(--radius);
  background:#fff;
  transition: opacity .25s ease, transform .25s ease,
              height .25s ease, margin .25s ease, padding .25s ease;
}
@media (max-width: 820px){
  .file-item-wrapper{
    grid-template-columns: 1fr; /* en kolumn på smala skärmar */
  }
}
.file-thumb img {
  max-width: 150px;
  height: auto;
}
.file-item-wrapper.is-removing{
  opacity:.0;
  transform: translateY(-6px) scale(.98);
  padding-top:0; padding-bottom:0;
  border-width:0;
}
.file-thumb .thumb-fallback {
  background: #fafafa;
  border: 1px solid var(--line);
  border-radius: 5px;
  width: 150px;
  aspect-ratio: 1;
  display: grid;
  place-content: center;
}
.file-item{
  display:grid;
  grid-template-columns: 1fr;
  grid-template-rows: min-content auto min-content;
  gap: 14px;

}

.file-meta{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.file-date{ color:var(--muted); font-size:12px; }

.file-summary .file-name{
  font-size: 12px;
  font-weight:600;
  margin-bottom:6px;
}
.file-summary .summary ul{
  margin:6px 0 0 18px;
}
.summary strong {
  font-size:14px;
}

.file-actions {
  display: flex;
  flex-wrap: wrap;         /* radbryt om det blir trångt */
  flex-direction: row;     /* ← rad istället för column */
  gap: 6px;
  align-items: center;
  justify-content: end; /* eller flex-end om du vill ha dem högerställda */
}

/* Responsiv: stacka kolumner på smala skärmar */
@media (max-width: 820px){
  .file-item{
    grid-template-columns: 1fr;
  }
  .file-actions{
    justify-content:flex-start;
  }
}

/* ---------- CHIPS / BADGES ---------- */

.chip{
  display:inline-block;
  max-width: fit-content;
  padding:2px 8px;
  border-radius:999px;
  font-size:12px;
  background:var(--chip);
  color:var(--chip-t);
  border:1px solid transparent;
}

/* Role chips */
.chip-role-owner{ background:#e6f2ff; color:#0b4b8c; border-color:#b9daff; }
.chip-role-editor{ background:#ecfdf5; color:#166534; border-color:#b5e3c6; }
.chip-role-viewer{ background:#f3f4f6; color:#374151; border-color:#e5e7eb; }

/* Kind chips */
.chip-kind-husbygge{ background:#fef3c7; color:#92400e; border-color:#fde68a; }
.chip-kind-tillbyggnad{ background:#e0e7ff; color:#3730a3; border-color:#c7d2fe; }
.chip-kind-huskop{ background:#ccfbf1; color:#155e75; border-color:#99f6e4; }

.chips { display:flex; gap:6px; align-items:center; flex-wrap:wrap; margin-top:4px; }

/* ---------- Projects page ---------- */

.project-list{ list-style:none; padding:0; margin:0; }
.project-item{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px; padding:6px 0;
  border-bottom:1px solid var(--line);
}
.project-title{ font-weight:600; margin:0 0 2px; }
.project-button-actions{ display:flex; gap:8px; flex-wrap:wrap; }
.project-create-title{ margin-top:16px; }
.project-create-form{ display:grid; grid-template-columns: auto auto min-content; gap:8px; align-items:center; }

/* Responsive adjustments */
@media (max-width: 720px){
  .project-item{ flex-direction:column; align-items:flex-start; gap:6px; }
  .project-button-actions{ width:100%; justify-content:flex-start; }
  .project-create-form{ grid-template-columns: 1fr; }
}

/* ---------- Modal ---------- */
.modal { position: fixed; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,.35); z-index: 3000; }
.modal[hidden] { display: none; }
.modal-dialog { background: #fff; border:1px solid var(--line); border-radius: 12px; padding:16px; width:min(420px, 92vw); box-shadow: var(--shadow); }
.modal-actions{ display:flex; gap:8px; justify-content:flex-end; margin-top:12px; }

/* ---------- Chips input (multi-assignee) ---------- */
.chips-input{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; border:1px solid transparent; background:white; border-radius:8px; padding:6px; min-height:38px; position:relative; }
.task-row .task-field .chips-input .chips-editor {border:unset; background:unset; box-shadow:unset; padding:0; margin:0; outline:none; }
.task-field.span-2 .muted-link {padding:1px 2px;}
.chips-input:focus-within{ box-shadow:none; border-color:transparent; }
.chips-input .chips-list{ display:flex; flex-wrap:wrap; gap:6px; }
.chips-list{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.chips-input .chip{ background:#eef2ff; color:#1e3a8a; border-color:#c7d2fe; }
.chip .x{ margin-left:6px; cursor:pointer; opacity:.7; display:inline-block; }
.chip .x:hover{ opacity:1; }
.chips-input .chips-editor{ border:none; outline:none; min-width:140px; flex:1; font-size:14px; padding:6px; background:transparent; }
.chips-suggest{ position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:30; }
.chips-suggest[hidden]{ display:none; }
.chips-suggest ul{ list-style:none; margin:0; padding:4px; border:1px solid var(--line); border-radius:8px; background:#fff; box-shadow:var(--shadow); max-height:220px; overflow:auto; }
.chips-suggest li{ padding:6px 8px; cursor:pointer; }
.chips-suggest li:hover, .chips-suggest li.active{ background:#f3f4f6; }
.assignee-chip{ background:#e8f5e9; color:#1b5e20; border-color:#c8e6c9; }
.task-row.add-row {
  background:unset;
  border:unset;
  box-shadow:unset;
}
.task-row.add-row .row-main {
  grid-template-columns: auto;
  justify-content:end;

}
/* Attachments chips list */
.attach-row{ display:flex; gap:8px; align-items:center; margin-bottom:6px; }
.attach-list .chip{ background:#f3f4f6; color:#111; border-color:#e5e7eb; }
.attach-list .chip a.label{ color:inherit; text-decoration: none; }
.attach-list .chip a.label:hover{ text-decoration: underline; }

/* ---------- MARKDOWN / ANSWERS ---------- */

.answer { line-height:1.5; }
.answer h3, .answer h2 { margin:14px 0 8px; }
.answer p { margin:8px 0; }
.answer ul, .answer ol { margin:8px 0 8px 20px; }
.answer li { margin:4px 0; }
.answer code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background:#f6f6f6;
  border:1px solid var(--line);
  padding:2px 6px;
  border-radius:6px;
}
.answer pre{
  background:#f6f6f6;
  border:1px solid var(--line);
  padding:10px 12px;
  border-radius:10px;
  overflow:auto;
}

/* snippets */
pre{
  background:#0b0b0b;
  color:#f1f1f1;
  border-radius:10px;
  padding:12px;
  overflow:auto;
}

figure {
    display: block;
    margin-block-start: 0px;
    margin-block-end: 5px;
    margin-inline-start: 10px;
    margin-inline-end: 10px;
    unicode-bidi: isolate;
}

/* notes and muted text */
.muted{ color:var(--muted); font-size:12px; 
  padding: 7px;
  background:#fafafa;
  border-radius: 5px;
  margin-top: 5px;
  max-width: max-content;
}

/* summary lists inside cells */
.summary ul{ margin:6px 0 0 18px; 
font-size:12px}



/* Vision image preview */
.vision-img {
  max-width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  display: block;
}

/* Vision pages grid */
.pages-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.page-link {
  display: block;
  text-align: center;
  padding: 10px 12px;
  border: 1px solid var(--btn-b);
  border-radius: 10px;
  color: var(--link);
  text-decoration: none;
  background: #fff;
}
.page-link:hover { background: var(--btn-h); }


/* ==== Vision / Chat thread styles ==== */

.vision-preview img {
  max-width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: block;
  margin: 0 auto;
}

/* Chat container */
.vision-thread, .chat-thread {
  /* Grow to fill its grid area and scroll */
  height: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
  background: #fafafa;
  border: 1px solid var(--line);
  border-radius: 12px;
}

/* Each message wrapper */
.msg {
  display: flex;
  align-items: flex-start;
}

/* User messages: aligned right */
.msg.user {
  justify-content: flex-end;
}

/* Assistant messages: aligned left */
.msg.assistant {
  justify-content: flex-start;
}

/* Assistant avatar next to messages */
.msg.assistant .avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 8px;
  border: 1px solid var(--line);
}

/* User avatar with initials (chat) */
.avatar-initials {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  border: 1px solid var(--line);
}
.avatar-initials[data-unknown="1"] { background: #9ca3af; }
.msg.user .avatar-initials { margin-left: 8px; }
.msg.assistant .avatar-initials { margin-right: 8px; }

.msg .bubble .ts {
  margin-top: 6px;
  font-size: 11px;
  color: #777;
  text-align: right;
}

/* Assistant header (small) */
.assistant-header {
  display: flex;
  align-items: center;
  justify-content: space-between; /* title left, close right */
  gap: 10px;
  margin: 6px 0 4px;
}
.assistant-header .avatar-lg {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--line);
}
.assistant-header .assistant-title .name {
  font-weight: 600;
}
.assistant-header .assistant-title .sub {
  font-size: 12px;
  color: #666;
}

/* Close button inside assistant header */
.assistant-header .assistant-close{
  margin-left: auto;
  border: 1px solid var(--line);
  background: #fff;
  width: 32px; height: 32px;
  border-radius: 50%;
  cursor: pointer;
  color: var(--nav-active-bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* When the in-content header is present, hide the panel-level close */
.chat-drawer__panel:has(.assistant-header) > .chat-drawer__close{ display:none; }

/* Message bubble */
.msg .bubble {
  max-width: 75%;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  line-height: 1.4;
  font-size: 14px;
  background: #f8f8f8;
  word-wrap: break-word;
}

/* Differentiate user bubble */
.msg.user .bubble {
  background: #e7f1ff;
  border-color: #cfe2ff;
  color: #08376b;
}

/* Assistant bubble */
.msg.assistant .bubble {
  background: #f3f3f3;
  border-color: #ddd;
  color: #222;
}

/* Chat layout wrapper: thread (1fr) + input (auto) */
.vision__chat, .doc-chat {
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: 70vh;
}

/* Chat form */
 .chat-form {
  background: #fafafa;
  padding: 10px;
  position: sticky; /* keeps input visible on small screens */
  bottom: 8px;
}

.vision-form .form-row, .chat-form .form-row {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.vision-form textarea, .chat-form textarea {
  flex: 1;
  min-height: 56px;
  resize: vertical;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid var(--btn-b);
  font-family: inherit;
  font-size: 14px;
  background: #fff;
}

.vision-form button, .chat-form button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 104px;
  padding: 10px 14px;
  border: 1px solid var(--btn-b);
  background: var(--btn);
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  color: var(--btn-ink);
}

.vision-form button:hover, .chat-form button:hover {
  background: var(--btn-h);
}

/* Loading state for button */
#ask-btn {
  position: relative;
}
#ask-btn.loading .btn-label {
  opacity: 0;
}
#ask-btn .spinner {
  display: none;
  width: 16px;
  height: 16px;
  border: 2px solid #999;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
#ask-btn.loading .spinner {
  display: inline-block;
  margin: 0 auto;
}

.msg .bubble p {
  margin: 0; /* inga extra mellanrum i chat */
}

.msg .bubble ul, 
.msg .bubble ol {
  margin: 4px 0 4px 5px;
}

.msg .bubble h1, 
.msg .bubble h2, 
.msg .bubble h3 {
  margin: 6px 0;
  font-size: 1em;  /* inga gigantiska rubriker i chat */
  font-weight: 600;
}

/* ============ Markdown tightening (answers + chat bubbles) ============ */
.answer, .vision-thread .bubble, .chat-thread .bubble {
  line-height: 1.35;
}

/* Headings inside markdown */
.answer h1, .answer h2, .answer h3,
.vision-thread .bubble h1, .vision-thread .bubble h2, .vision-thread .bubble h3,
.chat-thread .bubble h1, .chat-thread .bubble h2, .chat-thread .bubble h3 {
  margin: 0.4rem 0 0.35rem;
}

/* Paragraphs */
.answer p,
.vision-thread .bubble p,
.chat-thread .bubble p {
  margin: 0 0 0.5rem;   /* was ~1rem default */
}

/* Lists */
.answer ul, .answer ol,
.vision-thread .bubble ul, .vision-thread .bubble ol,
.chat-thread .bubble ul, .chat-thread .bubble ol {
  margin: 0.25rem 0 0.5rem;  /* tighten block margin */
  padding-left: 1.25rem;     /* slightly smaller indent */
}

/* List items */
.answer li,
.vision-thread .bubble li,
.chat-thread .bubble li {
  margin: 0.15rem 0;         /* small vertical gap between bullets */
}

/* The big one: <p> that gomarkdown puts INSIDE list items */
.answer li > p,
.vision-thread .bubble li > p,
.chat-thread .bubble li > p {
  margin: 0;                 /* remove inner paragraph spacing */
}

/* Code blocks/inline (if any) */
.answer pre, .vision-thread .bubble pre, .chat-thread .bubble pre {
  margin: 0.4rem 0;
  padding: 0.6rem;
  border-radius: 6px;
  background: #f6f8fa;
  overflow: auto;
}
.answer code, .vision-thread .bubble code, .chat-thread .bubble code {
  padding: 0.05rem 0.25rem;
  border-radius: 4px;
  background: #f6f8fa;
}

/* Optional: shrink bottom padding of the container so the input sits closer */
.box .answer { padding-bottom: 12px; }

.vision-thread .msg .bubble, .chat-thread .msg .bubble {
  padding: 10px 12px; /* was 12px 14px */
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ---- Chat typing indicator (shared) ---- */
.msg.assistant.pending .bubble { opacity: .8; }
.dots { display:inline-flex; gap:.25rem; vertical-align:middle }
.dots span{
  width:.35rem; height:.35rem; border-radius:50%; background:currentColor; display:inline-block;
  animation:bounce 1.2s infinite ease-in-out;
}
.dots span:nth-child(2){ animation-delay:.15s }
.dots span:nth-child(3){ animation-delay:.3s }
@keyframes bounce{ 0%,80%,100%{transform:scale(0.4);opacity:.6} 40%{transform:scale(1);opacity:1} }

.dropzone{
  border:2px dashed var(--btn-b);
  border-radius:12px;
  padding:24px;
  text-align:center;
  cursor:pointer;
  transition:background .15s ease, border-color .15s ease;
}
.dropzone:hover{ background:#fafafa; }
.dropzone.dragover{ background:#f1f6ff; border-color:#cfe2ff; }
.dz-icon{ font-size:28px; line-height:1; margin-bottom:6px; }
.dz-title{ font-weight:600; margin-bottom:4px; }
.dz-sub{ color:var(--muted); font-size:12px; }
.dz-actions{ margin-top:10px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 16px;
}
.form-grid label { display: flex; flex-direction: column; font-size: 14px; gap: 6px; }
.form-grid input[type="text"], .form-grid input[type="date"], .form-grid textarea {
  padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font: inherit;
}
.form-grid .actions { grid-column: 1 / -1; margin-top: 6px; }
@media (max-width: 720px) {
  .form-grid { grid-template-columns: 1fr; }
}

/* ---------- RESPONSIVE ---------- */

@media (max-width: 760px){
  .wrap{ margin:80px auto; padding:0px; border-radius:12px; }
  .card, .card.task-card {border-radius: 0px; padding:10px;}
  .nav{ padding:0 0 0px; }
  .nav .links a{ margin-left:8px; }
  .col-actions, .col-name, .col-date{ width:auto; }
  th,td{ padding:10px 6px; }
  .btn{ padding:8px 10px; }
  .project-header {
  flex-direction: column; /* standard: horisontellt */
  }
  .task-board #phase-rail {
    padding:18px 4px;
  }
  .meta .badge {max-width: fit-content;}
}

#scheduler-agent {
  padding:10px;
  border:1px solid var(--line);
  border-radius:12px;
  margin: 12px 0;
}

/* ---- Gantt Fullscreen Overlay ---- */
.gantt-overlay[hidden]{ display:none; }
.gantt-overlay{
  position: fixed;
  inset: 0;
  background: #fff;
  z-index: 2700;
  display: flex;
  flex-direction: column;
}
.gantt-overlay__head{
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 10px; border-bottom:1px solid var(--line);
}
.gantt-overlay__title{ font-weight:600; }
.gantt-overlay__body{ flex:1; display:flex; overflow:hidden; }
.gantt-overlay__body .gantt-scroll{ flex:1; overflow:auto; padding:8px; }
body.is-gantt-fullscreen { overflow:hidden; }

/* ---- Slide-out Chat Drawer ---- */
.chat-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  z-index: 2500;
}
.chat-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(520px, 92vw);
  transform: translateX(100%);
  transition: transform .25s ease;
  z-index: 2600;
  display: flex;
}
.chat-drawer.open { transform: translateX(0); }
.chat-drawer[aria-hidden="true"] { pointer-events: none; }
.chat-drawer__panel {
  background: #fff;
  border-left: 1px solid var(--line);
  box-shadow: var(--shadow);
  width: 100%;
  display: flex;
  flex-direction: column;
  position: relative; /* for loading overlay */
}
.chat-drawer__close {
  position: sticky;
  top: 0;
  align-self: flex-end;
  margin: 8px;
  border: 1px solid var(--line);
  background: #fff;
  width: 36px; height: 36px;
  border-radius: 50%;
  cursor: pointer;
  color: var(--nav-active-bg);
}
.chat-drawer__content {
  padding: 0px 6px;
  overflow: auto;
}
body.is-chat-open { overflow: hidden; }

/* Auth drawer fine-tuning */
#auth-drawer .form .actions { flex-direction: column; align-items: stretch; gap: 10px; }
#auth-drawer .form .actions .btn { width: 100%; }
#auth-drawer .full-width-wrapper { background: transparent; padding: 6px; max-width: 600px; }

/* Loader overlay inside drawer */
.chat-drawer__loading {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
}

/* Hide large document preview inside slide-out chat */
.chat-drawer__content .doc-preview { display: none !important; }

/* Document preview modal */
.doc-modal[aria-hidden="true"] { display: none; }
.doc-modal { position: fixed; inset: 0; z-index: 4000; display: grid; place-items: center; }
.doc-modal__overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); }
.doc-modal__dialog { position: relative; z-index: 2; width: min(92vw, 980px); max-height: 92vh; background: #fff; border:1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.doc-modal__head { display:flex; align-items:center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.doc-modal__title { font-weight: 600; }
.doc-modal__actions { display:flex; gap: 6px; align-items:center; }
.doc-modal__body { padding: 10px; overflow: auto; }
.doc-modal__body canvas, .doc-modal__body img { display:block; margin: 0 auto; max-width: 100%; height: auto; border-radius: 6px; border: 1px solid var(--line); background: #fff; }
.doc-modal__loading { display: grid; place-items: center; min-height: 40vh; }

/* Show doc preview in drawer; let JS scroll to it when launched from a thumbnail */

/* ---- Image preview modal (shared) ---- */
.preview-img { cursor: zoom-in; max-width:100%; height:auto; display:block; }
.img-modal { display:none; position:fixed; inset:0; z-index:9999; align-items:center; justify-content:center; }
.img-modal[aria-hidden="false"] { display:flex; }
.img-modal__overlay { position:fixed; inset:0; background:rgba(0,0,0,0.6); }
.img-modal__content { position:relative; max-width:90%; max-height:100%; margin:auto; z-index:2; }
.img-modal__content img { width:auto; display:block; border-radius:6px; max-height: 100vh; max-width: 100%; }
.img-modal__close { position:absolute; top:-10px; right:-10px; background:#fff; border-radius:50%; border:0; width:36px; height:36px; font-size:20px; cursor:pointer; line-height:1; }

/* ---- Project card helpers (bygger vidare på befintlig stil) ---- */
.project-card h2 { margin-bottom: 8px; }

.span-2 { grid-column: 1 / -1; }

.input-with-action {
  display: flex;
  align-items: center;
  gap: 8px;
}
.input-with-action input { flex: 1; }

.project-summary {
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  font-size: 13px;
}

/* ---- Project checkbox ---- */
.connections{
  display:flex;
  flex-wrap:wrap;
  gap:8px 10px;
  align-items:center;
  border:1px solid var(--line);
  border-radius:5px;    /* pill */
  background:#fff;
  max-height: fit-content;
  padding: 10px;
}

.connections label{
  display:inline-flex;
  align-items:center;
  gap:8px;                /* space between checkbox and text */
  cursor:pointer;
  transition:background .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.connections label:hover{
  background:var(--btn-h);
  border-color:var(--link-bor);
  box-shadow:0 1px 2px rgba(0,0,0,.04);
}

.connections input[type="checkbox"]{
  margin:0;               /* remove default top offset */
  width:16px; height:16px;
  accent-color: var(--primary);
}

/* Make chips full-width on very small screens if needed */
@media (max-width:480px){
  .connections{
    gap:8px;
  }
  .connections label{
    padding:6px 10px;
    font-size:13px;
  }
}

.project-flags legend {
  font-size: 14px;
  color: var(--ink-2);
  margin-bottom: 6px;
}
.checkrow { display: flex; gap: 14px; flex-wrap: wrap; }

/* Mobilanpassning: din .form-grid switchar redan till 1 kolumn <720px */
@media (max-width: 720px) {
  .project-summary { font-size: 12px; }
}

.file-tags{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin:6px 0 2px;
}

.chip.chip-soft{
  background:#f3f6ff;      /* lite mjukare än --chip */
  color:#17335b;
  border:1px solid #e0e8ff;
}

/* spinner upload */
.dropzone { cursor: pointer; border: 2px dashed var(--border, #d9d9de); border-radius: 12px; padding: 24px; text-align:center; transition: .15s border-color, .15s background; }
.dropzone:hover { border-color: var(--accent, #6b8afd); background: rgba(107,138,253,.04); }
.dropzone.is-drag { border-color: var(--accent, #6b8afd); background: rgba(107,138,253,.08); }
.dz-icon { font-size: 28px; margin-bottom: 6px; }
.dz-title { font-weight: 600; margin-bottom: 4px; }
.dz-sub { font-size: .95rem; color: var(--muted, #666); }

/* preview card */
.preview-card { display:flex; justify-content:space-between; align-items:center; gap:16px; border:1px solid var(--border, #e5e5ea); border-radius:12px; padding:12px 14px; margin-top:12px; background: #fff; }
.preview-name { font-weight:600; }
.preview-sub { font-size:.9rem; }
.preview-loader { display:flex; align-items:center; gap:8px; color: var(--muted, #666); }
.spinner { width:14px; height:14px; border-radius:50%; border:2px solid #cfd1d6; border-top-color: var(--accent, #6b8afd); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
/* Button normal (moved to main .btn.primary rule above) */
/* pulse when ready */
.btn.pulse {
  animation: pulse 1.2s ease-in-out infinite;
}
@keyframes pulse {
  0%   { transform: scale(1);    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5); }
  70%  { transform: scale(1.02); box-shadow: 0 0 0 12px rgba(16, 185, 129, 0); }
  100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}
.btn.primary.ready { background: var(--success-strong); border-color: var(--success-strong-b); }

/* pulsing green “ready” */
.pulse { background:var(--success)!important; color:#fff!important; animation:pulse 1.6s ease-in-out infinite; border-color: var(--success)!important; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(22,163,74,.5)}
  70%{box-shadow:0 0 0 12px rgba(22,163,74,0)} 100%{box-shadow:0 0 0 0 rgba(22,163,74,0)} }

.upload-preview { margin-top:14px; }
.preview-card { border:1px solid #e5e7eb; border-radius:12px; padding:14px; display:flex; gap:14px; align-items:center; background:#fff; }
.preview-card .thumb { width:64px; height:64px; object-fit:cover; border-radius:8px; border:1px solid #eee; }
.preview-card .thumb-fallback{width:64px;height:64px;border-radius:8px;border:1px dashed #ddd;display:flex;align-items:center;justify-content:center;color:#999;font-size:12px;}
.preview-card .meta { flex:1; }
.preview-card .name { font-weight:600; margin-bottom:4px; }
.preview-card .tags { display:flex; gap:8px; align-items:center; margin-bottom:6px; }
.spinner{width:16px;height:16px;border:2px solid #ddd;border-top-color:#444;border-radius:50%;animation:spin 0.8s linear infinite;display:inline-block;margin-left:6px}
@keyframes spin{to{transform:rotate(360deg)}}
.dz-icon{font-size:28px;opacity:.6;margin-bottom:6px}
.dropzone .dz-title{font-size:22px;font-weight:600}
.dropzone .dz-sub{opacity:.7;margin-top:4px}

/* The upload card layout should not overlap content below */
.upload-card form { position: relative; }

.upload-card .dropzone {
  display: grid!important;
  position: relative;
  z-index: 0;            /* sit behind other interactive bits below */
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 180px;     /* (as before) */
  margin-bottom: 16px;   /* give breathing room before the button/list */
  overflow: hidden;      /* confine any internal overlay */
}

/* If you created a drag-over overlay with a ::after that went full-viewport,
   confine it to the box (or just disable it). Example: */
.upload-card .dropzone.is-dragover::after {
  position: absolute;
  inset: 0;              /* overlay only within the dropzone */
  content: "";
  background: rgba(0,0,0,0.01); /* or whatever you had, but not fullscreen */
  pointer-events: none;
}

/* Make sure the button and the file list are above the dropzone */
#submit-btn { position: relative; z-index: 1; }
.file-list-card { position: relative; z-index: 1; }

/* Container that gives consistent horizontal padding */
.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 16px;
}

/* Page structure */
.vision { display: block; }
.vision__header { padding: 16px 0; border-bottom: 1px solid #eee; }
.vision__header h1 { margin: 0; }

/* Pages row */
.vision__pages { padding: 16px 0; }
.vision__pages-title { margin: 0 0 8px 0; }
.vision__thumbs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center; /* center thumbs within preview */
}

.vision__thumb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid #ddd;
  background: #fafafa;
  text-decoration: none;
  color: inherit;
  transition: transform .08s ease, background .2s ease;
  position: relative;
}
.vision__thumb:hover { transform: translateY(-1px); background: #f2f2f2; }
.vision__thumb-label { font-size: 14px; }

.vision__thumbs-empty { color: #888; font-style: italic; }

/* Thumbnail image inside link */
.vision__thumb-img {
  width: 96px;
  height: 64px;
  object-fit: cover;
  border-radius: 6px;
  display: block;
  margin-right: 8px;
}

/* Magnifier button inside thumb */
.vision__thumb-zoom {
  position: absolute;
  top: 4px;
  right: 4px;
  border: 1px solid #ddd;
  background: #fff;
  color: #333;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: grid;
  place-content: center;
  cursor: pointer;
}
.vision__thumb-zoom:hover { background: #f4f4f4; }

/* Rendering overlay + spinner for missing thumbs */
.vision__thumb.is-rendering::after{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.6);
  border-radius: 8px;
}

/* Hide thumbs beyond initial chunk until user loads more */
.vision__thumb.is-hidden { display: none !important; }
.vision__thumb.is-rendering::before{
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 22px; height: 22px;
  margin: -11px 0 0 -11px;
  border: 2px solid #888;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  z-index: 2;
}

/* Main image row */
.vision__canvas { padding: 8px 0 16px; }
.vision__image {
  width: 100%;
  height: auto;
  border-radius: 8px;
  display: block;
  box-shadow: 0 1px 8px rgba(0,0,0,.06);
}
.vision__image .main-img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  display: block;
  box-shadow: 0 1px 8px rgba(0,0,0,.06);
}
.vision__skeleton {
  width: 100%;
  height: 480px;
  border-radius: 8px;
  background: linear-gradient(90deg, #eee 25%, #f7f7f7 37%, #eee 63%);
  background-size: 400% 100%;
  animation: shimmer 1.2s infinite;
}
.vision__note { margin-top: 6px; color: #777; font-size: 14px; }

@keyframes shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: 0 0; }
}

/* Chat row */
.vision__chat { padding: 16px 0 40px; }

.vision-thread, .chat-thread {
  /* layout defined in main block above; keep extra spacing only */
  margin-bottom: 12px;
}

.msg { display: flex; }
.msg.user { justify-content: flex-end; }
.msg.assistant { justify-content: flex-start; }

.bubble {
  max-width: min(700px, 100%);
  padding: 10px 12px;
  border-radius: 12px;
  background: #f2f6ff;
  border: 1px solid #e3ecff;
}
.msg.user .bubble {
  background: #eafcf0;
  border-color: #d6f5df;
}

.vision-form__row, .chat-form__row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
}
.vision-form textarea, .chat-form textarea {
  min-height: 64px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #ddd;
  resize: vertical;
}

/* Buttons / spinner (reuse your existing core .btn styles if you have them) */
.btn.primary { position: relative; }
.btn.primary.loading .btn-label { opacity: 0.5; }
.btn.primary .spinner {
  width: 16px; height: 16px;
  border: 2px solid var(--primary-ink);
  border-right-color: transparent;
  border-radius: 50%;
  display: none;
  margin-left: 8px;
  animation: spin .7s linear infinite;
}
.btn.primary.loading .spinner { display: inline-block; }

@keyframes spin {
  to { transform: rotate(360deg); }
}

.doc-chat {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 0px); /* adjust offset if you have nav/header */
  max-height: calc(100vh - 0px);
}

.doc-head { display:flex; align-items:center; justify-content:space-between; }
.doc-name { font-weight:600; font-size:18px; }
.doc-meta { margin-top:4px; display:flex; gap:8px; }

.doc-chat .thread {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 16px;
}

.msg.user .bubble { 
  background: #255ed014;
  border: #255ed02e;
  color: #255ed0;
}

.doc-chat .ask {
  flex-shrink: 0;
  position: sticky;
  bottom: 0;
  background: #fff;
  border-top: 1px solid rgba(0,0,0,.1);
}

.msg.assistant .bubble { 
  background: #ecfdf5;
  border: #b5e3c6;
  color: #16a34a;
}
.bubble { padding:10px 12px; border-radius:12px; max-width:70ch; }
.doc-chat .ask textarea{
  width: 100%;
  max-height: 40vh;        /* prevent runaway growth */
  min-height: 48px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;
  resize: none;            /* we’ll autosize via JS */
  line-height: 1.35;
}

.doc-chat .ask .row{
  display:flex;
  justify-content:flex-end;
  gap:12px;
  margin-top:10px;
}
.doc-chat .msg{ margin: 8px 0; }
.snippets pre { background:#fafafa; padding:8px; border-radius:8px; overflow:auto; }

/* Center content in the preview area (images or thumbs) */
.doc-preview {
  display: grid;
  place-items: center;
}
.doc-preview img {
  max-width: 100%;
  max-height: 150px;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: block;
  margin: 0 auto;
}

/* keep this with the other gantt styles */
.gantt-card     { overflow: hidden; }
.gantt-container{ position: relative; min-height: 185px; }
.gantt-host     { position: relative; height: auto; }   /* <-- important */
.gantt-scroll   { overflow-x: auto; overflow-y: hidden; }
#gantt          { position: relative; display: block; }
.gantt-toolbar {margin-top:10px}
.timeline-inline {
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px dashed var(--g-border-color,#e2e2e2);
}
#gantt-view {
  max-width: fit-content;
}

.timeline-inline .tl-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.timeline-inline .tl-left {
  font-size: .9rem;
  margin-bottom: 4px;
}

.timeline-inline .tl-fields {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.timeline-inline input[type="text"],
.timeline-inline input[type="date"] {
  padding: 6px 8px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: .9rem;
  height: 34px;
}

.timeline-inline .btn.sm {
  height: 34px;
  line-height: 20px;
  padding: 0 12px;
}

.timeline-inline .tl-fields {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;         /* ✅ already lets them wrap */
}

@media (max-width: 600px) {
  .timeline-inline .tl-fields {
    flex-direction: column; /* ✅ stack vertically on mobile */
    align-items: stretch;
  }

  .timeline-inline input[type="text"],
  .timeline-inline input[type="date"],
  .timeline-inline .btn.sm {
    width: 100%;            /* ✅ full width on mobile */
  }
}

.doc-dot{
  display:inline-block;
  width:10px; height:10px;
  border-radius:50%;
  margin-right:6px;
  vertical-align:middle;
  background:#bbb;           /* fallback */
  box-shadow: 0 0 0 1px rgba(0,0,0,.08) inset;
}

.bar-red   .bar { fill: #e74c3c; }  /* red */
.bar-blue  .bar { fill: #3498db; }  /* blue */
.bar-green .bar { fill: #2ecc71; }  /* green */
.bar-grey  .bar { fill: #95a5a6; }  /* default */

/* Pending card look */
.file-item-wrapper.pending { opacity: .95; }
.file-item-wrapper.pending .file-item { position: relative; }

/* Skeleton thumb with shimmer */
.thumb-skeleton {
  width: 120px; height: 90px; border-radius: 8px;
  background: #f3f4f6; overflow: hidden;
  border: 1px solid #e5e7eb;
}
.thumb-skeleton .shimmer {
  width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, #eef2ff, transparent);
  animation: shimmer 1.2s infinite;
}
@keyframes shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(200%); }
}

/* Status row (dot + text) */
.status-row {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 6px 0 8px;
}
.status-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #3b82f6; box-shadow: 0 0 0 0 rgba(59,130,246,.7);
  animation: pulseDot 1.4s infinite;
}
@keyframes pulseDot {
  0% { box-shadow: 0 0 0 0 rgba(59,130,246,.6); }
  70% { box-shadow: 0 0 0 8px rgba(59,130,246,0); }
  100% { box-shadow: 0 0 0 0 rgba(59,130,246,0); }
}
.status-text { color: #6b7280; }

/* Indeterminate progress bar */
.progress {
  height: 6px; background: #e5e7eb; border-radius: 9999px; overflow: hidden;
}
.progress-bar {
  width: 35%; height: 100%; background: #3b82f6;
  animation: slideBar 1.1s ease-in-out infinite;
  border-radius: 9999px;
}
@keyframes slideBar {
  0%   { transform: translateX(-120%); }
  50%  { transform: translateX(60%); }
  100% { transform: translateX(220%); }
}

/* determinate variant for progress bars */
.progress-bar.is-determinate { animation: none; }

/* Header progress in task card */
.tasks-progress { display:flex; align-items:center; gap:10px; }
.tasks-progress .progress { width: 160px; height: 8px; background:#e5e7eb; border-radius:9999px; }
.tasks-progress .progress-bar { background: var(--success); }
.tasks-progress .progress-label { font-size: 12px; color:#64748b; }

/* Small debug badge in task header */
.tasks-debug { font-size: 12px; margin-left: 8px; }

/* Tiny spinner (fallback in actions column) */
.actions .spinner {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid #e5e7eb; border-top-color: #3b82f6;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.document-wrapper {
    display: grid;
    grid-template-rows:min-content auto;
}
.document-wrapper .page-meta {display: none; }
@media screen and (max-width: 900px) {
   .document-wrapper {
       grid-template-columns: 1fr;
   }
}





/* ========== Task Board Layout ========== */

.task-board {
  display: grid;
  gap: 16px;
}

/* Phase rail — horizontal & scrollable on small screens */
#phase-rail {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 6px 4px;
  border-radius: 10px;
  background: #f8fafc;
}

#phase-rail .phase {
  appearance: none;
  border: 1px solid #e5e7eb;
  background: #fff;
  color: #111827;
  padding: 7px 14px;             /* comfy hit area */
  border-radius: 10px;            /* softer, aligns with chips */
  font-size: 13px;                /* smaller header size */
  line-height: 1.2;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;

  /* stack title and badge vertically */
  display: grid;
  grid-template-columns: max-content min-content;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-align: center;
  white-space: normal;            /* allow wrapping for long titles */
}

#phase-rail .phase .task-name {
  display:block;
  font-weight:600;
}
#phase-rail .phase:hover {
  background: #f3f4f6;
}
#phase-rail .phase.active {
  background: #111827;            /* solid dark */
  color: #fff;
  border-color: #111827;
  box-shadow: 0 2px 8px rgba(17,24,39,.15);
}

/* On wider screens: rail becomes a left sidebar column */
@media (min-width: 960px) {
  .task-board {
    grid-template-columns: 260px 1fr;
    align-items: start;
  }
  #phase-rail {
    flex-direction: column;
    overflow: visible;
    background: transparent;
    padding: 0;
  }
  #phase-rail .phase {
    width: 100%;
    border-radius: 18px;         /* pill-like on desktop */
    text-align: center;          /* center title */
    flex-direction: column;      /* ensure column layout */
    align-items: center;
    justify-content: center;
  }
}

/* ========== Task Card Styles ========== */
.task-card { background: var(--card-2); border:1px solid var(--line); border-radius: var(--radius); }
.task-card .task-card-head { 
  display:flex; 
  align-items:center; 
  justify-content: space-between; 
  gap: 8px; margin-bottom: 8px; 
}
@media screen and (max-width: 800px) {
  .task-card .task-card-head { 
    flex-direction: column; 
    align-items: stretch; }
}
.task-card .task-card-head h2 { font-size: 20px; margin: 0; }

/* Stack by default (mobile-first) */
.task-list { display: grid; gap: 8px; }

/* Two-column layout is handled by .task-board (see earlier section) */

/* Generic badge for priorities */
.badge { display:inline-block; padding:2px 8px; border-radius:999px; font-size:11px; background:var(--chip); color:var(--chip-t); }
.badge.låg { background:#eef7ff; color:#1e40af; }
.badge.med { background:#fff7e6; color:#92400e; }
.badge.hög { background:#fee2e2; color:#991b1b; }

.task-row { display:flex; align-items:center; justify-content: space-between; gap: 10px; padding:8px 10px; background-color:#fff; border:1px solid var(--line); border-radius:10px; transition: background-color .28s ease, border-color .28s ease, box-shadow .28s ease; }
.task-row .task-title, .task-row .title { font-weight: 600; font-size:14px; transition: color .25s ease; }
.task-row .task-dates, .task-row .due { color: var(--muted); font-size: 12px; }
.task-row.is-done { background-color: var(--success-bg); border-color: var(--success-b); }
.task-row.is-done .task-title, .task-row.is-done .title { color: #166534; text-decoration: line-through; font-weight: 500; }

/* Checkbox look used in SSR template */
.task-row .check { display:inline-flex; align-items:center; gap:8px; cursor:pointer; }
.task-row .check input[type="checkbox"] { display:none; }
.task-row .check .box {
  width:10px; height: 10px;
  border:1px solid #cbd5e1;
  border-radius:5px;             /* pill-like circle */
  display:inline-block; background:#fff; position:relative;
  transition: border-color .15s ease, background .15s ease, transform .08s ease;
  padding: 10px 10px;
} 
.task-row .check:hover .box { border-color: var(--primary); transform: scale(1.02); }
.task-row.is-done .check .box { background: var(--success); border-color: var(--success); }
.task-row.is-done .check .box::after {
  content:""; position:absolute; left:5px; top:3px; width:6px; height:10px;
  border:2px solid #fff; border-top:0; border-left:0; transform: rotate(45deg);
}

/* Details panel inside a row */
.task-row { flex-direction: column; align-items: stretch; }
.task-row .row-main { cursor: pointer;
  display:grid; 
  grid-template-columns: auto 1fr auto; /* checkbox | title (flex) | meta */
  align-items:center; 
  justify-content: space-between; 
  width: 100%; }
.task-row .row-main .meta{
    display: grid;
    grid-template-columns: auto min-content min-content min-content;
}

 @media screen and (max-width: 800px) {
     .task-row .row-main {
       grid-template-columns: 1fr;
       grid-template-rows: auto auto;
       gap: 6px;
     }
   }
 
.task-row .title { 
  white-space: nowrap; 
  overflow: hidden; 
  text-overflow: ellipsis; 
  min-width: 0; /* required for grid/flex clipping */
  margin-left:8px;
}
.task-row .title .saving-indicator{
  display:none;
  width:12px; height:12px;
  border:2px solid #cfd1d6;           /* subtle ring */
  border-top-color:#0b5fff;           /* saving accent */
  border-right-color: transparent;    /* smooth spinner look */
  border-radius:50%;
  margin-left:6px;
  animation: spin .8s linear infinite;
}
.task-row.is-saving .title .saving-indicator{ display:inline-block; }
.task-row .meta { display: inline-flex; gap: 8px; align-items: center; }
.task-row .task-status { margin-left: auto; font-size: 12px; color: #64748b; }
.task-row.is-saving .task-status { color: #0b5fff; }
.task-row.is-error  .task-status { color: #8a0b0b; }

/* Subtle focus highlight when jumping from Gantt */
.task-row.is-focused {
  outline: 2px solid rgba(31,60,100,.25);
  box-shadow: 0 0 0 3px rgba(31,60,100,.12);
  background: rgba(31,60,100,.06);
}
.task-row .task-details { width: 100%; border-top: 1px dashed #e5e7eb; margin-top: 8px; padding-top: 8px; }
.task-row .details-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.task-row .task-field label { font-size: 12px; color: #6b7280; margin-bottom: 4px; display: block; }
.task-row .task-field input[type="date"],
.task-row .task-field input[type="text"] { width: 100%; padding: 6px 8px; border: 1px solid #e5e7eb; border-radius: 6px; background:#fff; }
.task-row .task-field .tl-priority {
      padding: 6px 12px;                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      







































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    à
}


.attach-row { display:flex; gap:8px; align-items:center; margin:6px 0; }
.attach-row .tl-attach {
  max-width: fit-content;
  padding: 6px 12px;
}
.attach-list { list-style:none; padding:0; margin:4px 0 0; display:grid; gap:6px; }
.attach-list li { 
  display:flex; 
  align-items:center; 
  background:none; 
  border:unset;
  border-radius:8px; 
  padding:6px 8px; 
  gap:10px;
  max-width: fit-content;
    background: white;
    box-shadow: 0px 0px 2px #00000070;
}
.attach-list .muted {
background: unset;
color:lightgray;
border:unset;
box-shadow: unset;
}
.attach-list li a {
  font-size: 13px; 
  font-weight: 500; 
  color: var(--link); 
  text-decoration: underline;
  overflow: hidden; 
  text-overflow: ellipsis; 
  white-space: nowrap; 
}
.attach-list a { color:inherit; text-decoration:none; }
.attach-list .tl-attach-del { 
  width:22px; 
  height:22px; 
  border-radius:50%;
  border:1px solid var(--btn-b); 
  background: var(--btn); 
  cursor:pointer; 
  line-height:20px; 
  text-align:center; 
  color: var(--btn-ink); 
}

.task-row .task-footer { display:flex; align-items:center; justify-content: space-between; margin-top: 10px; }
.task-row .task-footer .left { display:flex; gap:8px; align-items:center; }
.task-row .task-footer .right { display:flex; gap:8px; align-items:center; }
.task-row .task-footer .tl-save { display: none; }
.btn.tl-gantt.is-added { background: var(--success-bg); color: var(--success-ink); border-color: var(--success-b); }

/* Optional small counter inside phase button rendered by JS */
#phase-rail .phase .badge {
  display:block;
  margin-top:4px;
  font-size:10px;
  color:#6b7280;
  background:#f3f4f6;
  border:1px solid #e5e7eb;
  padding:2px 6px;
  border-radius:999px;
}
#phase-rail .phase.active .badge {
  color:#fff;
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.28);
}
/* ---- Page loading overlay ---- */
.page-loading{ display:none; position:fixed; inset:0; background:rgba(255,255,255,.65); z-index: 3000; align-items:center; justify-content:center; }
.page-loading.show{ display:flex; }
.page-loading__spinner{
  width:36px; height:36px; border:3px solid #999; border-top-color: transparent; border-radius:50%;
  animation: spin 1s linear infinite;
}
/* Hide sub-version cards (grouped under v1 card) */
.file-item-wrapper.is-sub-version { display: none; }

/* Optional active state for version chips */
.version-chip.chip-active { background: var(--ink-200, #e5e7eb); }

/* Hide empty AI summary/version note placeholders to avoid visual gaps */
.file-summary-text:empty,
.file-version-note:empty {
  display: none;
  margin: 0;
}