/* ============================================================
   WILLIAMSON MEDIA — CLIENT PORTAL
   Loads after main.css; same inks, app-shaped.
   ============================================================ */

/* ---------- login ---------- */
.login-split {
  min-height: 100svh;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
}
@media (max-width: 860px) { .login-split { grid-template-columns: 1fr; } }

.login-brand {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(1.6rem, 4vw, 3.2rem);
  background: linear-gradient(155deg, var(--void-2), var(--overlap) 140%);
  border-right: 1px solid rgba(237, 234, 247, 0.07);
}
@media (max-width: 860px) { .login-brand { min-height: 38vh; border-right: 0; } }
.login-brand .ribbon-bg {
  position: absolute;
  bottom: -22%; right: -16%;
  width: clamp(380px, 46vw, 640px);
  opacity: 0.5;
  pointer-events: none;
}
.login-brand .ribbon-bg path { mix-blend-mode: screen; }
.login-brand-body { position: relative; max-width: 30rem; margin-top: 4rem; }
.login-brand-body h1 {
  font-size: clamp(2rem, 1.4rem + 2.8vw, 3.4rem);
  font-weight: 700;
}
.login-brand-body p { margin-top: 1.1rem; color: var(--ink-dim); }
.login-points { margin-top: 2rem; display: grid; gap: 0.85rem; }
.login-points li { display: flex; gap: 0.8rem; align-items: baseline; color: var(--ink-dim); font-size: 0.95rem; }
.login-points li::before { content: "✓"; color: #7df5c0; font-weight: 700; }
.login-brand-foot { position: relative; color: var(--ink-faint); font-size: 0.82rem; }

.login-form-side {
  display: grid;
  place-items: center;
  padding: clamp(1.6rem, 4vw, 3.2rem);
}
.login-card { width: min(420px, 100%); }
.login-card h2 { font-size: 1.5rem; font-weight: 700; }
.login-card > p { margin-top: 0.6rem; color: var(--ink-dim); font-size: 0.95rem; }
.login-card form { margin-top: 1.8rem; display: grid; gap: 1.2rem; }
.login-divider {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: var(--ink-faint);
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-block: 1.4rem;
}
.login-divider::before, .login-divider::after {
  content: ""; flex: 1; height: 1px;
  background: rgba(237, 234, 247, 0.12);
}
.btn-demo { width: 100%; justify-content: center; }
.login-error {
  border-radius: 12px;
  border: 1.5px solid rgba(255, 107, 107, 0.45);
  background: rgba(255, 107, 107, 0.08);
  color: #ff9b9b;
  padding: 0.85rem 1.1rem;
  font-size: 0.9rem;
  font-weight: 600;
}
.login-note { margin-top: 1.6rem; color: var(--ink-faint); font-size: 0.82rem; text-align: center; }
.login-card [hidden]{display:none!important}.login-error.reset-success{border-color:rgba(125,245,192,.4);background:rgba(125,245,192,.08);color:#7df5c0}

/* ---------- app shell ---------- */
.app {
  display: grid;
  grid-template-columns: 258px 1fr;
  min-height: 100svh;
}
.app-scrim {
  position: fixed; inset: 0;
  z-index: 1090;
  background: rgba(8, 6, 15, 0.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
.app.side-open .app-scrim { opacity: 1; pointer-events: auto; }
.app-sidebar {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100svh;
  display: flex;
  flex-direction: column;
  padding: 1.6rem 1.2rem;
  background: var(--void-2);
  border-right: 1px solid rgba(237, 234, 247, 0.07);
}
.app-sidebar .brand { margin-bottom: 2.2rem; padding-inline: 0.6rem; }
.app-nav { display: grid; gap: 0.3rem; }
.app-nav a {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.8rem 1rem;
  border-radius: 12px;
  color: var(--ink-dim);
  font-weight: 600;
  font-size: 0.93rem;
  transition: background 0.25s, color 0.25s;
}
.app-nav a:hover { color: var(--ink); background: rgba(237, 234, 247, 0.05); }
.app-nav a.is-active {
  color: var(--ink);
  background: linear-gradient(100deg, rgba(61, 43, 255, 0.25), rgba(200, 31, 224, 0.18));
}
.app-nav svg { width: 19px; height: 19px; flex: none; }
.app-side-foot {
  margin-top: auto;
  padding: 1rem 0.6rem 0;
  border-top: 1px solid rgba(237, 234, 247, 0.07);
  display: grid;
  gap: 0.7rem;
}
.app-user { display: flex; align-items: center; gap: 0.75rem; }
.app-avatar {
  width: 38px; height: 38px;
  flex: none;
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--void);
  background: linear-gradient(135deg, var(--blue-bright), var(--magenta-bright));
}
.app-user strong { display: block; font-size: 0.88rem; line-height: 1.25; }
.app-user span { color: var(--ink-faint); font-size: 0.76rem; }
.app-logout {
  color: var(--ink-faint);
  font-size: 0.85rem;
  font-weight: 600;
  text-align: left;
  padding: 0.4rem 0;
  transition: color 0.25s;
}
.app-logout:hover { color: #ff9b9b; }

.app-main { padding: clamp(1.4rem, 3.5vw, 2.8rem); min-width: 0; }
.app-head {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 2rem;
}
.app-head h1 { font-size: clamp(1.5rem, 1.2rem + 1.6vw, 2.2rem); font-weight: 700; }
.app-head p { color: var(--ink-dim); margin-top: 0.4rem; font-size: 0.95rem; }
.demo-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #ffd166;
  border: 1px solid rgba(255, 209, 102, 0.4);
  border-radius: 999px;
  padding: 0.45rem 1rem;
}
.demo-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #ffd166; }
.actions-panel{margin-bottom:1.2rem;border-color:rgba(200,31,224,.2);background:linear-gradient(135deg,rgba(90,75,255,.09),rgba(200,31,224,.035))}.actions-panel[hidden]{display:none}.actions-panel-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:.7rem}.actions-panel-head h2{margin-top:.15rem}.actions-count{padding:.35rem .65rem;border-radius:999px;background:rgba(200,31,224,.14);color:var(--magenta-bright);font-size:.68rem;font-weight:700}.client-action{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.9rem;padding:.85rem 0;border-top:1px solid rgba(237,234,247,.07)}.client-action>div{min-width:0}.client-action strong{display:block;font-size:.9rem}.client-action p{margin:.2rem 0;color:var(--ink-dim);font-size:.78rem}.client-action small{color:var(--ink-faint);font-size:.7rem;text-transform:capitalize}.action-kind{padding:.32rem .5rem;border-radius:7px;font-size:.58rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em}.action-kind.task{background:rgba(125,245,192,.12);color:#7df5c0}.action-kind.approval{background:rgba(255,209,102,.12);color:#ffd166}.client-action .btn{padding:.55rem .8rem;font-size:.62rem}.action-check{display:flex;align-items:center;gap:.55rem;margin-top:.8rem;color:var(--ink-dim);font-size:.78rem}.action-check input{accent-color:var(--magenta-bright)}@media(max-width:650px){.client-action{grid-template-columns:auto 1fr}.client-action .btn{grid-column:1/-1;width:100%;justify-content:center}.action-kind{align-self:start}}

/* mobile app chrome */
.app-topbar { display: none; }
@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; }
  .app-sidebar {
    position: fixed;
    inset: 0 30% 0 0;
    z-index: 1100;
    min-width: 260px;
    transform: translateX(-102%);
    transition: transform 0.4s var(--ease-snap);
    box-shadow: 30px 0 80px rgba(0, 0, 0, 0.5);
  }
  .app.side-open .app-sidebar { transform: none; }
  .app-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.9rem 1.2rem;
    background: var(--void-2);
    border-bottom: 1px solid rgba(237, 234, 247, 0.07);
    position: sticky;
    top: 0;
    z-index: 1000;
  }
  .app-topbar .brand-mark { width: 34px; }
  .app-topbar button {
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--ink-dim);
    border: 1.5px solid rgba(237, 234, 247, 0.2);
    padding: 0.5rem 1rem;
    border-radius: 999px;
  }
}

/* ---------- stat cards ---------- */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}
.stat-card {
  border-radius: var(--radius);
  background: var(--void-3);
  border: 1px solid rgba(237, 234, 247, 0.08);
  padding: 1.2rem 1.3rem;
}
.stat-card .tag { color: var(--ink-faint); }
.stat-card strong {
  display: block;
  margin-top: 0.5rem;
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 700;
  background: linear-gradient(120deg, var(--blue-bright), var(--magenta-bright));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat-card span { display: block; margin-top: 0.2rem; color: var(--ink-dim); font-size: 0.82rem; }

/* ---------- project cards ---------- */
.proj-grid { display: grid; gap: 1.1rem; }
.proj-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1.4rem;
  align-items: center;
  padding: 1.4rem 1.5rem;
  border-radius: var(--radius);
  background: var(--void-3);
  border: 1px solid rgba(237, 234, 247, 0.08);
  transition: transform 0.35s var(--ease-out), border-color 0.3s;
}
.proj-card:hover { transform: translateY(-4px); border-color: rgba(90, 75, 255, 0.5); }
@media (max-width: 640px) { .proj-card { grid-template-columns: auto 1fr; } .proj-card .btn { grid-column: 1 / -1; justify-content: center; } }

.ring { width: 64px; height: 64px; position: relative; flex: none; }
.ring svg { transform: rotate(-90deg); }
.ring .ring-bg { stroke: rgba(237, 234, 247, 0.1); }
.ring .ring-val { stroke: url(#ring-grad); stroke-linecap: round; transition: stroke-dashoffset 1.2s var(--ease-out); }
.ring b {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
}
.proj-card h3 { font-size: 1.08rem; font-weight: 700; font-family: var(--font-body); }
.proj-card .proj-meta { margin-top: 0.35rem; display: flex; gap: 0.8rem; flex-wrap: wrap; align-items: center; color: var(--ink-dim); font-size: 0.85rem; }
.phase-chip {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.28rem 0.75rem;
  border-radius: 999px;
  background: rgba(61, 43, 255, 0.18);
  color: #a99fff;
}
.phase-chip.done { background: rgba(125, 245, 192, 0.12); color: #7df5c0; }
.proj-card .btn { padding: 0.7rem 1.3rem; font-size: 0.7rem; }

/* ---------- activity feed ---------- */
.panel {
  border-radius: var(--radius);
  background: var(--void-3);
  border: 1px solid rgba(237, 234, 247, 0.08);
  padding: 1.5rem 1.6rem;
}
.panel h2 { font-size: 1.02rem; font-weight: 700; font-family: var(--font-body); margin-bottom: 1.1rem; }
.feed { display: grid; gap: 0; }
.feed-item {
  position: relative;
  padding: 0.9rem 0 0.9rem 1.9rem;
  border-left: 2px solid rgba(237, 234, 247, 0.08);
  margin-left: 0.4rem;
}
.feed-item::before {
  content: "";
  position: absolute;
  left: -7px; top: 1.35rem;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--void-3);
  border: 3px solid var(--blue-bright);
}
.feed-item.magenta::before { border-color: var(--magenta-bright); }
.feed-item.green::before { border-color: #7df5c0; }
.feed-item p { font-size: 0.93rem; }
.feed-item time { color: var(--ink-faint); font-size: 0.78rem; }

.dash-cols {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 1.1rem;
  align-items: start;
}
@media (max-width: 980px) { .dash-cols { grid-template-columns: 1fr; } }

/* ---------- project detail ---------- */
.phase-stepper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
  margin: 1.6rem 0 2rem;
}
@media (max-width: 640px) { .phase-stepper { grid-template-columns: repeat(2, 1fr); } }
.phase-step {
  padding: 0.9rem 1rem;
  border-radius: 14px;
  border: 1px solid rgba(237, 234, 247, 0.09);
  background: var(--void-3);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ink-faint);
  position: relative;
  overflow: hidden;
}
.phase-step small { display: block; font-weight: 400; color: var(--ink-faint); font-size: 0.72rem; margin-top: 0.15rem; }
.phase-step.done {
  color: var(--ink);
  border-color: rgba(125, 245, 192, 0.3);
}
.phase-step.done::after { content: "✓"; position: absolute; right: 0.9rem; top: 0.8rem; color: #7df5c0; }
.phase-step.current {
  color: var(--ink);
  border-color: transparent;
  background: linear-gradient(110deg, rgba(61, 43, 255, 0.3), rgba(200, 31, 224, 0.22));
}
.phase-step.current::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  height: 3px; width: 100%;
  background: linear-gradient(90deg, var(--blue-bright), var(--magenta-bright));
  animation: phase-pulse 2.2s ease-in-out infinite;
}
@keyframes phase-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

.milestones { display: grid; gap: 0.6rem; }
.milestone {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.85rem 1rem;
  border-radius: 12px;
  background: rgba(237, 234, 247, 0.03);
  border: 1px solid rgba(237, 234, 247, 0.06);
  font-size: 0.92rem;
}
.milestone .m-check {
  width: 22px; height: 22px;
  flex: none;
  border-radius: 50%;
  border: 2px solid rgba(237, 234, 247, 0.25);
  display: grid; place-items: center;
  font-size: 0.7rem;
  color: var(--void);
}
.milestone.done .m-check { background: #7df5c0; border-color: #7df5c0; }
.milestone.done .m-label { color: var(--ink-dim); text-decoration: line-through; text-decoration-color: rgba(237,234,247,0.3); }
.milestone.active .m-check { border-color: var(--magenta-bright); box-shadow: 0 0 12px rgba(200, 31, 224, 0.5); }
.milestone .m-label { flex: 1; font-weight: 600; }
.milestone time { color: var(--ink-faint); font-size: 0.78rem; }

.proj-detail-cols {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 1.1rem;
  align-items: start;
}
@media (max-width: 980px) { .proj-detail-cols { grid-template-columns: 1fr; } }

.big-bar {
  height: 12px;
  border-radius: 99px;
  background: rgba(237, 234, 247, 0.08);
  overflow: hidden;
  margin-top: 1rem;
}
.big-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--blue-bright), var(--magenta-bright));
  transition: width 1.2s var(--ease-out);
}

/* ---------- messages ---------- */
.thread { display: grid; gap: 1rem; max-width: 760px; }
.msg {
  max-width: 78%;
  padding: 1rem 1.2rem;
  border-radius: 18px;
  font-size: 0.95rem;
  position: relative;
}
.msg time { display: block; margin-top: 0.45rem; font-size: 0.72rem; color: var(--ink-faint); }
.msg.from-studio {
  justify-self: start;
  background: var(--void-3);
  border: 1px solid rgba(237, 234, 247, 0.09);
  border-bottom-left-radius: 6px;
}
.msg.from-client {
  justify-self: end;
  background: linear-gradient(120deg, rgba(61, 43, 255, 0.4), rgba(200, 31, 224, 0.3));
  border: 1px solid rgba(90, 75, 255, 0.35);
  border-bottom-right-radius: 6px;
}
.msg .msg-who { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--magenta-bright); margin-bottom: 0.35rem; }
.composer {
  margin-top: 1.4rem;
  display: flex;
  gap: 0.7rem;
  max-width: 760px;
}
.composer input {
  flex: 1;
  font: inherit;
  color: var(--ink);
  background: rgba(237, 234, 247, 0.05);
  border: 1.5px solid rgba(237, 234, 247, 0.14);
  border-radius: 999px;
  padding: 0.9rem 1.4rem;
}
.composer input:focus { outline: none; border-color: var(--magenta-bright); }
.composer .btn { padding: 0.9rem 1.5rem; }

/* ---------- social messaging ---------- */
.nav-count { margin-left:auto; min-width:20px; height:20px; padding:0 6px; display:inline-grid; place-items:center; border-radius:99px; background:var(--magenta-bright); color:white; font-size:.68rem; }
.nav-count[hidden]{display:none}
.chat-shell { display:grid; grid-template-columns:290px minmax(0,1fr); min-height:640px; overflow:hidden; border:1px solid rgba(237,234,247,.11); border-radius:24px; background:rgba(18,14,31,.72); box-shadow:0 28px 70px -45px #000; }
.chat-list { border-right:1px solid rgba(237,234,247,.09); background:rgba(237,234,247,.025); }
.chat-list-head { display:grid; gap:.2rem; padding:1.3rem; border-bottom:1px solid rgba(237,234,247,.08); }
.chat-list-head strong,.chat-head strong { font-family:var(--font-display); font-size:.88rem; }
.chat-list-head span,.chat-head small { color:var(--ink-faint); font-size:.75rem; }
.chat-convos { padding:.55rem; display:grid; gap:.5rem; align-content:start; }
.chat-convo { width:100%; display:grid; grid-template-columns:42px 1fr auto; align-items:center; gap:.75rem; padding:.8rem; color:var(--ink); text-align:left; border:0; border-radius:14px; background:transparent; cursor:pointer; }
.chat-convo:hover,.chat-convo.is-active { background:rgba(90,75,255,.13); }
.chat-convo>span:nth-child(2) { display:grid; gap:.18rem; min-width:0; }
.chat-convo b,.chat-convo small { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.chat-convo b { font-size:.86rem; }.chat-convo small { color:var(--ink-faint); font-size:.72rem; }.chat-convo i { display:grid; place-items:center; min-width:20px;height:20px;padding:0 5px;border-radius:99px;background:var(--magenta-bright);font-style:normal;font-size:.65rem; }
.chat-avatar { width:42px;height:42px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(145deg,var(--blue-bright),var(--magenta-bright));font-family:var(--font-display);font-size:.68rem;font-weight:700;color:white;box-shadow:0 6px 20px rgba(90,75,255,.25);flex:none; }
.chat-main { min-width:0; display:flex; flex-direction:column; max-height:720px; }
.chat-head { min-height:70px; padding:.85rem 1.2rem; display:flex;align-items:center;gap:.8rem;border-bottom:1px solid rgba(237,234,247,.08); }.chat-head div{display:grid;gap:.16rem;}
.chat-thread { flex:1; overflow-y:auto; display:flex;flex-direction:column; gap:.9rem; padding-block:1.4rem; padding-inline:max(1.4rem,calc((100% - 1180px)/2)); background:radial-gradient(circle at 80% 10%,rgba(90,75,255,.07),transparent 35%); }
.chat-bubble { min-width:145px; max-width:min(68%,680px); padding:.88rem 1.05rem .65rem; border-radius:18px; overflow-wrap:anywhere; }
.chat-bubble.theirs { align-self:flex-start;background:var(--void-3);border:1px solid rgba(237,234,247,.09);border-bottom-left-radius:5px; }.chat-bubble.mine { align-self:flex-end;background:linear-gradient(135deg,#5142df,#a520bd);border-bottom-right-radius:5px;color:#fff; }
.chat-bubble>b { display:block;color:rgba(255,255,255,.7);font-size:.7rem;margin-bottom:.3rem; }.chat-bubble p{margin:0;line-height:1.5;font-size:1rem;white-space:normal}.chat-bubble time{display:block;text-align:right;margin-top:.45rem;font-size:.65rem;color:rgba(255,255,255,.52);}
.chat-image { display:block;margin:.45rem 0; }.chat-image img{display:block;max-width:100%;max-height:300px;border-radius:12px;object-fit:cover;}
.chat-attachment { display:flex;align-items:center;gap:.55rem;margin:.45rem 0;padding:.55rem;background:rgba(5,3,12,.25);border-radius:11px;color:white}.chat-attachment>span:last-child{display:grid;min-width:0}.chat-attachment strong{font-size:.76rem;overflow:hidden;text-overflow:ellipsis}.chat-attachment small{font-size:.64rem;opacity:.65}
.chat-compose { position:relative; display:flex;align-items:flex-end;gap:.45rem;padding:.85rem;border-top:1px solid rgba(237,234,247,.08); }.chat-compose textarea{flex:1;resize:none;min-height:44px;max-height:120px;padding:.68rem 1rem;border:1px solid rgba(237,234,247,.13);border-radius:18px;background:rgba(237,234,247,.055);color:var(--ink);font:inherit;line-height:1.35}.chat-compose textarea:focus{outline:0;border-color:var(--blue-bright)}
.chat-icon,.chat-send { width:42px;height:42px;display:grid;place-items:center;flex:none;border:0;border-radius:50%;cursor:pointer;color:var(--ink-dim);background:rgba(237,234,247,.07); }.chat-icon:hover{color:white;background:rgba(90,75,255,.2)}.chat-icon svg,.chat-send svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.chat-send{color:white;background:linear-gradient(135deg,var(--blue-bright),var(--magenta-bright))}.chat-send:disabled{opacity:.45}
.emoji-pop { position:absolute;left:12px;bottom:64px;z-index:3;width:210px;padding:.6rem;grid-template-columns:repeat(4,1fr);gap:.25rem;background:var(--void-2);border:1px solid rgba(237,234,247,.12);border-radius:16px;box-shadow:0 20px 50px #0008}.emoji-pop:not([hidden]){display:grid}.emoji-pop button{padding:.35rem;border:0;border-radius:8px;background:transparent;font-size:1.2rem;cursor:pointer}.emoji-pop button:hover{background:rgba(237,234,247,.08)}
.chat-files { padding:.5rem .9rem 0;display:flex;gap:.4rem;flex-wrap:wrap}.chat-files[hidden]{display:none}.chat-files span{padding:.35rem .55rem;border-radius:8px;background:rgba(90,75,255,.13);font-size:.7rem}.chat-files button{border:0;background:none;color:var(--ink-faint);cursor:pointer}.chat-empty{margin:auto;padding:2rem;text-align:center;color:var(--ink-faint)}.chat-empty-thread{margin:auto}.chat-loading,.chat-none{padding:1rem;color:var(--ink-faint);font-size:.8rem}
@media(max-width:760px){.chat-shell{grid-template-columns:92px minmax(0,1fr);min-height:560px}.chat-list-head span,.chat-convo>span:nth-child(2),.chat-convo i{display:none}.chat-list-head{padding:1rem .5rem;text-align:center}.chat-list-head strong{font-size:.65rem}.chat-convo{display:grid;grid-template-columns:1fr;justify-items:center;padding:.55rem}.chat-bubble{max-width:88%}.chat-thread{padding:.85rem}.chat-compose{gap:.3rem;padding:.65rem}.chat-icon,.chat-send{width:38px;height:38px}.chat-main{max-height:680px}}

/* messaging v2: inbox state, receipts, presence and true mobile drill-in */
.chat-list-head>div{display:grid;gap:.2rem}.chat-convo{position:relative}.chat-convo.has-unread{background:rgba(90,75,255,.1)}.chat-convo.has-unread b{color:#fff}.chat-convo-copy{display:grid;gap:.2rem;min-width:0}.chat-convo-copy>span{display:flex;justify-content:space-between;gap:.5rem;align-items:center}.chat-convo-copy time{font-size:.61rem;color:var(--ink-faint);font-style:normal}.chat-convo-copy em{font-size:.62rem;color:var(--magenta-bright);font-style:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chat-convo.has-unread small{color:var(--ink-dim);font-weight:600}.chat-none{min-height:260px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.35rem;text-align:center;padding:1.5rem;color:var(--ink-faint)}.chat-none>span{font-size:1.7rem}.chat-none strong{color:var(--ink-dim);font-size:.8rem}.chat-none small{font-size:.7rem;line-height:1.5}.chat-empty{display:flex;flex-direction:column;align-items:center;gap:.45rem}.chat-empty strong{color:var(--ink-dim);font-family:var(--font-display);font-size:.85rem}.chat-empty-icon{font-size:2rem}.chat-head{position:relative}.chat-presence{font-size:.61rem;color:#7df5c0}.chat-presence:before{content:"";display:inline-block;width:6px;height:6px;margin-right:5px;border-radius:50%;background:#7df5c0;box-shadow:0 0 8px #7df5c0}.chat-back{display:none;width:38px;height:38px;place-items:center;border:0;border-radius:50%;background:rgba(237,234,247,.06);color:var(--ink);cursor:pointer}.chat-back svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.chat-bubble time{display:flex;justify-content:flex-end;gap:.5rem;align-items:center}.receipt{font-weight:600;color:rgba(255,255,255,.65)}.receipt.is-read{color:#8edbff}.typing-line{align-self:flex-start;margin:0 1.4rem .55rem;padding:.55rem .8rem;border-radius:14px 14px 14px 4px;background:var(--void-3);color:var(--ink-faint);font-size:.65rem}.typing-line[hidden]{display:none}.typing-line span{display:inline-block;width:5px;height:5px;margin-right:3px;border-radius:50%;background:var(--ink-dim);animation:typing-dot 1.1s infinite}.typing-line span:nth-child(2){animation-delay:.15s}.typing-line span:nth-child(3){animation-delay:.3s}.typing-line b{margin-left:.25rem;font-weight:400}@keyframes typing-dot{0%,60%,100%{transform:translateY(0);opacity:.45}30%{transform:translateY(-4px);opacity:1}}
.chat-sound{margin-left:auto;width:38px;height:38px;display:grid;place-items:center;flex:none;border:1px solid rgba(237,234,247,.09);border-radius:50%;background:rgba(237,234,247,.045);cursor:pointer;font-size:1rem}.chat-sound:hover{background:rgba(90,75,255,.16);border-color:rgba(90,75,255,.35)}
.notify-setup{width:38px;height:38px;display:grid;place-items:center;flex:none;border:1px solid rgba(237,234,247,.09);border-radius:50%;background:rgba(237,234,247,.045);cursor:pointer;font-size:.95rem}.notify-setup:hover,.notify-setup.is-on{background:rgba(90,75,255,.16);border-color:rgba(90,75,255,.4)}.chat-list-head{display:flex;align-items:center;justify-content:space-between;gap:.6rem}.chat-head .notify-setup{margin-left:auto}.chat-head .notify-setup+.chat-sound{margin-left:0}
.studio-toggle{margin-left:auto;padding:.42rem .65rem;border:1px solid rgba(125,245,192,.35);border-radius:999px;background:rgba(125,245,192,.08);color:#7df5c0;font-size:.63rem;font-weight:700;cursor:pointer}.studio-toggle.is-offline{border-color:rgba(255,155,155,.4);background:rgba(255,155,155,.08);color:#ff9b9b}.studio-toggle+.notify-setup{margin-left:0}.chat-presence.is-offline{color:#ffbd70}.chat-presence.is-offline:before{background:#ff9b9b;box-shadow:0 0 8px #ff9b9b}
.assistant-menu{flex:0 0 auto;margin:.65rem max(.8rem,calc((100% - 1180px)/2));padding:.8rem 1rem;border:1px solid rgba(90,75,255,.18);border-radius:14px;background:linear-gradient(135deg,rgba(90,75,255,.11),rgba(200,31,224,.06))}.assistant-menu[hidden]{display:none}.assistant-menu>strong{display:block;font-family:var(--font-display);font-size:.7rem;color:var(--magenta-bright)}.assistant-menu>span{display:block;margin:.25rem 0 .65rem;color:var(--ink-dim);font-size:.75rem}.assistant-menu>div{display:flex;flex-wrap:wrap;gap:.4rem}.assistant-option{padding:.42rem .7rem;border:1px solid rgba(237,234,247,.14);border-radius:999px;background:rgba(237,234,247,.045);color:var(--ink-dim);font-size:.67rem;cursor:pointer}.assistant-option:hover{color:#fff;border-color:rgba(200,31,224,.5);background:rgba(200,31,224,.1)}
@media(max-width:760px){.studio-toggle{font-size:.58rem;padding:.38rem .55rem}.assistant-menu{margin:.5rem .65rem;padding:.7rem}.assistant-menu>span{font-size:.7rem}.assistant-option{font-size:.62rem}}

/* Messages is an app surface, not a page inside the app. */
.app.messages-mode{height:100svh;overflow:hidden}.messages-mode>div:last-child{min-width:0;height:100svh}.messages-mode .app-main{height:100svh;padding:0}.messages-mode #view-messages{height:100%;overflow:hidden}.messages-mode .messages-page-head{display:none}.messages-mode #admin-chat,.messages-mode #client-chat{height:100%;min-height:0}.messages-mode .chat-shell{height:100%;min-height:0;border-block:0;border-right:0;border-radius:0}.messages-mode .chat-main{height:100%;max-height:none;min-height:0;overflow:hidden}.messages-mode .chat-thread{min-height:0;flex:1 1 0;overflow-y:auto}.messages-mode .chat-head,.messages-mode .chat-compose{flex:0 0 auto}.messages-mode .chat-list{overflow-y:auto}.messages-mode .chat-convos{padding-bottom:2rem}
@media(max-width:760px){
  .chat-shell{display:block;min-height:620px;height:calc(100dvh - 205px);border-radius:20px}.chat-list{display:block;height:100%;border:0}.chat-list-head{padding:1rem 1.1rem;text-align:left}.chat-list-head strong{font-size:.9rem}.chat-list-head span{display:block}.chat-convos{padding:.45rem .55rem;gap:.45rem}.chat-convo{display:grid;grid-template-columns:48px minmax(0,1fr) auto;justify-items:stretch;padding:.75rem .65rem;border-radius:13px;border-bottom:1px solid rgba(237,234,247,.055)}.chat-convo>span:nth-child(2),.chat-convo i{display:grid}.chat-convo .chat-avatar{width:48px;height:48px}.chat-convo-copy>span{display:flex}.chat-main{display:none;height:100%;max-height:none}.chat-shell.thread-open .chat-list{display:none}.chat-shell.thread-open .chat-main{display:flex}.chat-back{display:grid}.chat-head{min-height:68px;padding:.7rem}.chat-head .chat-avatar{width:38px;height:38px}.chat-head strong{font-size:.76rem}.chat-thread{padding:.8rem;gap:.65rem}.chat-bubble{min-width:110px;max-width:88%;font-size:.88rem}.chat-compose{padding:.55rem;gap:.3rem;background:rgba(12,9,22,.94)}.chat-compose textarea{min-width:0;padding:.65rem .8rem}.chat-icon,.chat-send{width:38px;height:38px}.typing-line{margin-left:.8rem}.emoji-pop{left:6px;bottom:58px}
}
@media(max-width:860px){.app.messages-mode{height:100dvh}.messages-mode>div:last-child{height:100dvh;display:grid;grid-template-rows:auto minmax(0,1fr)}.messages-mode .app-main{height:auto;min-height:0}.messages-mode .chat-shell{height:100%;min-height:0;border:0;border-radius:0}.messages-mode #view-messages{min-height:0}.messages-mode .chat-main{min-height:0}.messages-mode .chat-compose{padding-bottom:max(.55rem,env(safe-area-inset-bottom))}}
@media(max-width:430px){.chat-shell{height:calc(100dvh - 180px);min-height:540px}.chat-icon{width:34px;height:34px}.chat-send{width:38px;height:38px}.chat-compose{gap:.2rem}.chat-compose textarea{font-size:.85rem}.chat-bubble{max-width:92%}}

/* ---------- files ---------- */
.file-table { width: 100%; border-collapse: collapse; }
.file-table th {
  text-align: left;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding: 0.6rem 1rem;
  border-bottom: 1px solid rgba(237, 234, 247, 0.1);
}
.file-table td {
  padding: 0.95rem 1rem;
  border-bottom: 1px solid rgba(237, 234, 247, 0.05);
  font-size: 0.92rem;
  color: var(--ink-dim);
}
.file-table td:first-child { color: var(--ink); font-weight: 600; }
.file-table tr:hover td { background: rgba(237, 234, 247, 0.025); }
.file-icon {
  display: inline-grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 9px;
  margin-right: 0.7rem;
  font-size: 0.62rem;
  font-weight: 800;
  font-family: var(--font-display);
  color: var(--void);
  vertical-align: middle;
}
.file-icon.pdf { background: #ff9b9b; }
.file-icon.img { background: #7df5c0; }
.file-icon.doc { background: #8a7dff; }
.file-icon.zip { background: #ffd166; }
.file-icon.aud { background: var(--magenta-bright); }
@media (max-width: 700px) {
  .file-table thead { display: none; }
  .file-table td { display: block; border: none; padding: 0.25rem 0.5rem; }
  .file-table tr { display: block; padding: 0.8rem 0.4rem; border-bottom: 1px solid rgba(237, 234, 247, 0.07); }
}

/* view switching */
.view { display: none; }
.view.is-active { display: block; animation: view-in 0.45s var(--ease-out); }
@keyframes view-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

/* ---------- message-us link (sidebar) ---------- */
.app-msg-us {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-dim);
  padding: 0.7rem 0.9rem;
  margin-bottom: 0.8rem;
  border-radius: 12px;
  border: 1px solid rgba(237, 234, 247, 0.12);
  transition: border-color 0.25s, color 0.25s, background 0.25s;
}
.app-msg-us:hover {
  color: var(--ink);
  border-color: rgba(200, 31, 224, 0.45);
  background: rgba(200, 31, 224, 0.06);
}
.app-msg-us svg { flex: none; }

/* ---------- project file rows + upload ---------- */
.pfile {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.8rem 0.6rem;
  border-radius: 12px;
  border: 1px solid rgba(237, 234, 247, 0.06);
  background: rgba(237, 234, 247, 0.03);
  margin-bottom: 0.6rem;
  transition: border-color 0.25s, background 0.25s, transform 0.25s;
}
.pfile:hover { border-color: rgba(90, 75, 255, 0.4); background: rgba(237, 234, 247, 0.05); transform: translateX(3px); }
.pfile-main { display: grid; gap: 0.1rem; min-width: 0; }
.pfile-main b { font-weight: 600; font-size: 0.92rem; overflow-wrap: anywhere; }
.pfile-main small { color: var(--ink-faint); font-size: 0.78rem; }
.upload-note { font-size: 0.85rem; margin-bottom: 0.9rem; color: var(--ink-dim); }

/* project-level conversation preview */
.project-chat-panel{position:relative;overflow:hidden;background:linear-gradient(135deg,rgba(90,75,255,.105),rgba(200,31,224,.045) 65%,rgba(237,234,247,.025));border-color:rgba(90,75,255,.22)}
.project-chat-panel:after{content:"";position:absolute;width:180px;height:180px;right:-90px;top:-100px;border-radius:50%;background:rgba(200,31,224,.09);filter:blur(20px);pointer-events:none}
.project-chat-head{position:relative;z-index:1;display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}.project-chat-head>div{display:flex;align-items:center;gap:.8rem}.project-chat-head h2{margin:0 0 .18rem}.project-chat-head p{color:var(--ink-faint);font-size:.76rem}.project-chat-icon{width:40px;height:40px;display:grid;place-items:center;flex:none;border-radius:12px;background:rgba(90,75,255,.17);font-size:1rem}.project-chat-unread{padding:.35rem .65rem;border-radius:999px;background:var(--magenta-bright);color:#fff;font-size:.66rem;font-weight:700;white-space:nowrap}.project-chat-preview{position:relative;z-index:1;margin:1rem 0;padding:.8rem 1rem;border-left:2px solid rgba(200,31,224,.55);background:rgba(8,6,15,.2);border-radius:0 12px 12px 0}.project-chat-preview strong{font-size:.68rem;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-faint)}.project-chat-preview p{margin-top:.25rem;color:var(--ink-dim);font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.project-chat-open{position:relative;z-index:1;padding:.65rem 1.05rem;font-size:.68rem}
@media(max-width:600px){.project-chat-head{align-items:center}.project-chat-head p{display:none}.project-chat-preview p{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.project-chat-panel .project-chat-open{width:100%;justify-content:center}}

/* ============================================================
   ADMIN — CRUD chrome (dashboard, tables, modals, forms)
   ============================================================ */
.admin-flash {
  padding: 0.85rem 1.2rem;
  border-radius: 12px;
  margin-bottom: 1.4rem;
  font-weight: 600;
  font-size: 0.92rem;
}
.admin-flash.ok { border: 1.5px solid rgba(125, 245, 192, 0.4); background: rgba(125, 245, 192, 0.08); color: #7df5c0; }
.admin-flash.err { border: 1.5px solid rgba(255, 107, 107, 0.45); background: rgba(255, 107, 107, 0.08); color: #ff9b9b; }

.admin-actions { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.admin-action {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0.7rem 1.2rem;
  border-radius: 999px;
  border: 1.5px solid rgba(237, 234, 247, 0.18);
  color: var(--ink-dim);
  transition: all 0.25s;
}
.admin-action:hover { color: var(--ink); border-color: var(--magenta-bright); background: rgba(200, 31, 224, 0.1); }

/* row action buttons in tables */
.row-actions { display: inline-flex; gap: 0.4rem; flex-wrap: wrap; align-items: center; }
.mini {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.35rem 0.7rem;
  border-radius: 8px;
  border: 1px solid rgba(237, 234, 247, 0.18);
  color: var(--ink-dim);
  background: none;
  cursor: pointer;
  transition: all 0.2s;
}
.mini:hover { color: var(--ink); border-color: rgba(90, 75, 255, 0.6); }
.mini.danger:hover { color: #ff9b9b; border-color: rgba(255, 107, 107, 0.5); }

/* modal */
.modal-wrap { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; padding: 1.2rem; }
.modal-wrap[hidden] { display: none; }
.modal-scrim { position: absolute; inset: 0; background: rgba(8, 6, 15, 0.72); backdrop-filter: blur(4px); }
.modal-card {
  position: relative;
  width: min(460px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  background: var(--void-2);
  border: 1px solid rgba(237, 234, 247, 0.12);
  border-radius: var(--radius-lg);
  padding: 1.8rem;
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.6);
  animation: view-in 0.3s var(--ease-out);
}
.modal-card h3 { font-size: 1.3rem; font-weight: 700; margin-bottom: 1.2rem; }
.mlabel { display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-dim); margin: 0.9rem 0 0.35rem; }
.minput {
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: rgba(237, 234, 247, 0.045);
  border: 1.5px solid rgba(237, 234, 247, 0.14);
  border-radius: 12px;
  padding: 0.75rem 0.95rem;
}
.minput:focus { outline: none; border-color: var(--magenta-bright); background: rgba(200, 31, 224, 0.05); }
select.minput option { background: var(--void-2); }
.modal-actions { display: flex; gap: 0.7rem; justify-content: flex-end; margin-top: 1.6rem; }
.form-error { color: #ff9b9b; font-size: 0.85rem; margin-top: 0.8rem; font-weight: 600; }

.inline-form { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; margin-top: 0.6rem; }
.inline-form .minput { width: auto; flex: 1; min-width: 140px; }

.tot-row { display: flex; justify-content: space-between; padding: 0.5rem 0; color: var(--ink-dim); }
.tot-row b { color: var(--ink); }
.tot-row.grand { border-top: 1px solid rgba(237, 234, 247, 0.12); margin-top: 0.4rem; padding-top: 0.8rem; font-size: 1.15rem; }
.tot-row.grand b { font-family: var(--font-display); }
.btn.danger { color: #ff9b9b; }
.btn.danger:hover { border-color: rgba(255, 107, 107, 0.5); }
.action-decision { display:flex; gap:.5rem; align-items:center; }
.approval-history { display:block!important; margin-top:.28rem; color:var(--ink-dim)!important; text-transform:none!important; }
.approval-history b { text-transform:capitalize; color:var(--ink); }
.project-timeline { margin-top:.8rem; }
.timeline-item { position:relative; display:grid; grid-template-columns:18px minmax(0,1fr); gap:.7rem; padding:0 0 1rem; }
.timeline-item:not(:last-child)::before { content:""; position:absolute; left:6px; top:14px; bottom:0; width:1px; background:rgba(237,234,247,.12); }
.timeline-dot { position:relative; z-index:1; width:13px; height:13px; margin-top:3px; border-radius:50%; background:var(--purple); box-shadow:0 0 0 4px rgba(90,75,255,.1); }
.timeline-dot.client { background:#7df5c0; box-shadow:0 0 0 4px rgba(125,245,192,.1); }
.timeline-item strong { display:block; font-size:.82rem; }
.timeline-item p { margin:.18rem 0; color:var(--ink-dim); font-size:.74rem; }
.timeline-item small { color:var(--ink-faint); font-size:.66rem; }
.project-actions-panel { border-color:rgba(200,31,224,.22); background:linear-gradient(135deg,rgba(90,75,255,.1),rgba(200,31,224,.04)); }
.due-state { display:inline-flex; padding:.16rem .42rem; border-radius:999px; background:rgba(237,234,247,.07); color:var(--ink-dim); font-weight:700; }
.due-state.overdue { background:rgba(255,107,107,.14); color:#ff9b9b; }
.due-state.due_soon { background:rgba(255,209,102,.14); color:#ffd166; }
.client-action.overdue { border-left:2px solid rgba(255,107,107,.7); padding-left:.75rem; }
.client-action.due_soon { border-left:2px solid rgba(255,209,102,.65); padding-left:.75rem; }
.client-action.is-new { background:linear-gradient(90deg,rgba(200,31,224,.08),transparent); }
.client-action.is-new .action-kind::after { content:"New"; display:block; margin-top:.18rem; color:var(--magenta-bright); font-size:.48rem; letter-spacing:.1em; }
.task-filter { width:auto; min-width:130px; background:rgba(20,16,35,.9); color:var(--ink); }
.visibility-badge { display:inline-flex; margin-left:.35rem; padding:.16rem .38rem; border-radius:999px; font-size:.52rem!important; font-weight:800; text-transform:uppercase; letter-spacing:.06em; }
.visibility-badge.internal { background:rgba(237,234,247,.08); color:var(--ink-dim)!important; }
.visibility-badge.client_visible { background:rgba(90,75,255,.14); color:#aaa2ff!important; }
.visibility-badge.client_action { background:rgba(200,31,224,.14); color:var(--magenta-bright)!important; }
.phase1-health { display:flex; gap:.6rem; align-items:center; margin:0 0 1rem; padding:.8rem 1rem; border:1px solid rgba(237,234,247,.1); border-radius:12px; font-size:.72rem; }
.phase1-health strong { font-family:var(--font-display); font-size:.7rem; }
.phase1-health span { color:var(--ink-dim); }
.phase1-health.ready { border-color:rgba(125,245,192,.24); background:rgba(125,245,192,.06); }
.phase1-health.ready strong { color:#7df5c0; }
.phase1-health.missing { border-color:rgba(255,107,107,.28); background:rgba(255,107,107,.07); }
.phase1-health.missing strong { color:#ff9b9b; }
.staff-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:.8rem; }
.staff-card { padding:1rem; border:1px solid rgba(237,234,247,.09); border-radius:14px; background:rgba(16,13,28,.42); }
.staff-card.inactive { opacity:.55; }
.staff-card-head { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:.65rem; }
.staff-card-head strong,.staff-card-head span { display:block; }
.staff-card-head span,.staff-card p,.staff-card small { color:var(--ink-dim); font-size:.7rem; }
.staff-card p { margin:.7rem 0 .25rem; }
.staff-card .row-actions { margin-top:.8rem; }
.availability-dot { width:10px; height:10px; border-radius:50%; background:var(--ink-faint); }
.availability-dot.available { background:#7df5c0; box-shadow:0 0 10px rgba(125,245,192,.45); }
.availability-dot.busy { background:#ffd166; }
.availability-dot.away { background:#ff9b9b; }
.permission-grid { display:grid; grid-template-columns:1fr 1fr; gap:.15rem .7rem; margin:.25rem 0 1rem; }
@media(max-width:600px){.permission-grid{grid-template-columns:1fr}.staff-grid{grid-template-columns:1fr}}
.task-scope-tabs { display:flex; flex-wrap:wrap; gap:.45rem; margin-bottom:.8rem; }
.task-scope-tabs .mini { padding:.55rem .8rem; }
.task-scope-tabs .mini.is-active { border-color:rgba(200,31,224,.45); background:rgba(200,31,224,.12); color:var(--ink); }
.task-scope-tabs span { margin-left:.25rem; color:var(--magenta-bright); }
.staff-task-list { display:grid; gap:.25rem; }
.staff-task { display:grid; grid-template-columns:8px minmax(0,1fr) auto auto; align-items:center; gap:.75rem; padding:.8rem; border:1px solid transparent; border-radius:11px; color:var(--ink); text-decoration:none; }
.staff-task:hover { border-color:rgba(90,75,255,.25); background:rgba(90,75,255,.06); }
.staff-task strong,.staff-task p { display:block; margin:0; }
.staff-task p,.staff-task small { margin-top:.18rem; color:var(--ink-dim); font-size:.68rem; }
.task-priority { width:7px; height:34px; border-radius:99px; background:var(--ink-faint); }
.task-priority.high { background:#ffd166; }.task-priority.urgent { background:#ff6b6b; }.task-priority.low { background:#7df5c0; }
.task-due { padding:.25rem .5rem; border-radius:999px; color:var(--ink-dim); background:rgba(237,234,247,.06); font-size:.64rem; font-weight:700; }
.staff-task.overdue .task-due { color:#ff9b9b; background:rgba(255,107,107,.12); }
.staff-task.today .task-due { color:#ffd166; background:rgba(255,209,102,.12); }
.staff-task.dependency-blocked { border-color:rgba(255,107,107,.16); opacity:.78; }
.staff-task.dependency-blocked .task-due { color:#ff9b9b; background:rgba(255,107,107,.12); }
.dependency-note { display:block!important; margin-top:.25rem; color:#ff9b9b!important; font-size:.6rem!important; }
@media(max-width:600px){.staff-task{grid-template-columns:7px minmax(0,1fr) auto}.staff-task>small{display:none}}
.kanban-board { display:grid; grid-template-columns:repeat(5,minmax(250px,1fr)); gap:.8rem; align-items:start; overflow-x:auto; padding-bottom:1rem; scroll-snap-type:x proximity; }
.kanban-column { min-height:520px; padding:.7rem; border:1px solid rgba(237,234,247,.08); border-radius:15px; background:rgba(14,11,25,.55); scroll-snap-align:start; transition:border-color .18s,background .18s; }
.kanban-column.drag-over { border-color:rgba(200,31,224,.55); background:rgba(200,31,224,.07); }
.kanban-column>header { display:flex; justify-content:space-between; align-items:center; margin-bottom:.65rem; }
.kanban-column>header h2 { font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; }
.kanban-column>header span { min-width:22px; height:22px; display:grid; place-items:center; border-radius:99px; background:rgba(237,234,247,.07); color:var(--ink-dim); font-size:.62rem; }
.kanban-cards { display:grid; gap:.55rem; }
.kanban-card { padding:.8rem; border:1px solid rgba(237,234,247,.09); border-left:3px solid var(--ink-faint); border-radius:11px; background:linear-gradient(145deg,rgba(29,24,47,.95),rgba(17,14,29,.95)); cursor:grab; box-shadow:0 8px 22px rgba(0,0,0,.12); }
.kanban-card.high { border-left-color:#ffd166; }.kanban-card.urgent { border-left-color:#ff6b6b; }.kanban-card.low { border-left-color:#7df5c0; }
.kanban-card.is-dragging { opacity:.38; cursor:grabbing; }
.kanban-card>a { color:var(--ink); text-decoration:none; }
.kanban-card strong,.kanban-card span { display:block; }
.kanban-card span,.kanban-card small,.kanban-card p { color:var(--ink-dim); font-size:.62rem; }
.kanban-card span { margin-top:.2rem; }.kanban-card>div { display:flex; justify-content:space-between; gap:.5rem; margin-top:.7rem; }
.kanban-card p { margin:.55rem 0 0; color:#ff9b9b; }
@media(max-width:900px){.kanban-board{grid-template-columns:repeat(5,82vw)}.kanban-column{min-height:420px}}
.calendar-controls { display:flex; gap:.4rem; }
.calendar-panel>h2 { margin-bottom:.8rem; }
.calendar-scroll { overflow-x:auto; padding-bottom:.35rem; }
.calendar-grid { min-width:850px; display:grid; grid-template-columns:repeat(7,minmax(118px,1fr)); border-top:1px solid rgba(237,234,247,.08); border-left:1px solid rgba(237,234,247,.08); }
.calendar-weekday { padding:.62rem; border-right:1px solid rgba(237,234,247,.1); border-bottom:1px solid rgba(237,234,247,.1); color:#b8b0dc; font-size:.68rem; font-weight:800; text-align:center; text-transform:uppercase; letter-spacing:.06em; }
.calendar-day { min-height:142px; padding:.55rem; border-right:1px solid rgba(237,234,247,.09); border-bottom:1px solid rgba(237,234,247,.09); background:rgba(15,12,26,.26); }
.calendar-day.outside { opacity:.35; }.calendar-day.today { background:rgba(90,75,255,.09); box-shadow:inset 0 0 0 1px rgba(90,75,255,.32); }
.calendar-date { display:grid; width:26px; height:26px; place-items:center; margin-bottom:.42rem; border-radius:50%; color:#aaa2cc; font-size:.72rem; font-weight:700; }
.calendar-day.today .calendar-date { background:var(--purple); color:white; }
.calendar-day-tasks { display:grid; gap:.4rem; }
.calendar-task { display:block; min-height:48px; padding:.55rem .62rem; border:1px solid rgba(237,234,247,.08); border-left:4px solid var(--ink-faint); border-radius:8px; background:linear-gradient(135deg,rgba(42,35,68,.98),rgba(28,23,47,.98)); color:#fff; text-decoration:none; overflow:hidden; box-shadow:0 5px 14px rgba(0,0,0,.16); transition:transform .15s,border-color .15s,background .15s; }
.calendar-task:hover { transform:translateY(-1px); border-color:rgba(170,162,255,.35); background:linear-gradient(135deg,rgba(53,44,84,.98),rgba(34,28,57,.98)); }
.calendar-task.high { border-left-color:#ffd166; }.calendar-task.urgent { border-left-color:#ff6b6b; }.calendar-task.low { border-left-color:#7df5c0; }
.calendar-task.complete { opacity:.7; }
.calendar-task.complete strong { text-decoration:line-through; }
.calendar-task strong,.calendar-task span { display:block; overflow:hidden; text-overflow:ellipsis; }
.calendar-task strong { color:#fff; font-size:.78rem; line-height:1.35; white-space:normal; overflow-wrap:anywhere; }
.calendar-task span { margin-top:.28rem; color:#c5bde4; font-size:.62rem; line-height:1.4; white-space:normal; }
.calendar-unscheduled { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:.45rem; margin-top:.7rem; }
@media(max-width:700px){.calendar-panel{padding:.7rem}.calendar-grid{min-width:840px}.calendar-day{min-height:126px}.calendar-controls{width:100%;justify-content:flex-end}.calendar-unscheduled{grid-template-columns:1fr}.calendar-task strong{font-size:.68rem}.calendar-task span{font-size:.55rem}}
.timeline-scroll { overflow-x:auto; padding-bottom:.55rem; }
.delivery-timeline { min-width:1120px; margin-top:.8rem; border:1px solid rgba(237,234,247,.08); border-radius:12px; overflow:hidden; }
.timeline-head,.timeline-row { display:grid; grid-template-columns:240px minmax(840px,1fr); }
.timeline-head { min-height:42px; background:rgba(237,234,247,.035); border-bottom:1px solid rgba(237,234,247,.1); }
.timeline-head>span { display:flex; align-items:center; padding:.65rem .8rem; color:var(--ink-dim); font-size:.62rem; font-weight:800; text-transform:uppercase; border-right:1px solid rgba(237,234,247,.08); }
.timeline-weeks { display:grid; grid-template-columns:repeat(12,1fr); }
.timeline-weeks span { display:flex; align-items:center; justify-content:center; border-right:1px solid rgba(237,234,247,.07); color:#aaa2cc; font-size:.57rem; font-weight:700; }
.timeline-row { min-height:58px; border-bottom:1px solid rgba(237,234,247,.065); }
.timeline-row:last-child { border-bottom:0; }
.timeline-label { display:flex; flex-direction:column; justify-content:center; min-width:0; padding:.6rem .8rem; border-right:1px solid rgba(237,234,247,.08); color:var(--ink); text-decoration:none; }
.timeline-label strong,.timeline-label span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.timeline-label strong { font-size:.7rem; }.timeline-label span { margin-top:.18rem; color:var(--ink-dim); font-size:.55rem; }
.timeline-track { position:relative; background-image:repeating-linear-gradient(to right,transparent 0,transparent calc(8.333% - 1px),rgba(237,234,247,.065) calc(8.333% - 1px),rgba(237,234,247,.065) 8.333%); }
.timeline-bar { position:absolute; top:13px; height:32px; display:flex; align-items:center; min-width:8px; padding:0 .5rem; border-radius:7px; background:linear-gradient(90deg,#5145dc,#756bff); color:#fff; text-decoration:none; overflow:hidden; box-shadow:0 5px 14px rgba(0,0,0,.2); }
.timeline-bar.high { background:linear-gradient(90deg,#a66d16,#d39c34); }.timeline-bar.urgent { background:linear-gradient(90deg,#b83e55,#ed6074); }.timeline-bar.low { background:linear-gradient(90deg,#278b70,#48b996); }
.timeline-bar.blocked { background:repeating-linear-gradient(135deg,#6d3340 0,#6d3340 8px,#8f4353 8px,#8f4353 16px); }.timeline-bar.complete { opacity:.48; }
.timeline-bar span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.58rem; font-weight:700; }
.timeline-today-line { position:absolute; z-index:3; top:0; bottom:0; width:2px; background:var(--magenta-bright); box-shadow:0 0 8px rgba(200,31,224,.55); pointer-events:none; }
.timeline-empty { padding:1.2rem; color:var(--ink-faint); font-size:.75rem; }
@media(max-width:700px){.timeline-panel{padding:.7rem}.delivery-timeline{min-width:980px}.timeline-head,.timeline-row{grid-template-columns:200px minmax(780px,1fr)}}
.planning-tabs { display:flex; align-items:center; gap:.35rem; width:max-content; max-width:100%; margin:-.2rem 0 1rem; padding:.3rem; border:1px solid rgba(237,234,247,.1); border-radius:12px; background:rgba(20,16,35,.72); overflow-x:auto; }
.planning-tabs a { flex:0 0 auto; padding:.55rem .9rem; border-radius:8px; color:var(--ink-dim); font-size:.67rem; font-weight:700; text-decoration:none; transition:color .15s,background .15s; }
.planning-tabs a:hover { color:var(--ink); background:rgba(237,234,247,.05); }
.planning-tabs a.is-active { color:#fff; background:linear-gradient(135deg,rgba(90,75,255,.7),rgba(200,31,224,.55)); box-shadow:0 5px 14px rgba(90,75,255,.18); }
@media(max-width:600px){.planning-tabs{width:100%;margin-top:0}.planning-tabs a{flex:1 0 auto;text-align:center;padding:.6rem .75rem}}
.health-chip { display:inline-flex; align-items:center; gap:.35rem; padding:.38rem .62rem; border:1px solid transparent; border-radius:999px; background:rgba(125,245,192,.1); color:#7df5c0; font:700 .58rem var(--font-body); text-transform:capitalize; cursor:pointer; }
.health-chip::before { content:""; width:7px; height:7px; border-radius:50%; background:currentColor; }
.health-chip:disabled { cursor:default; opacity:.82; }
.health-chip.attention { background:rgba(255,209,102,.12); color:#ffd166; }.health-chip.blocked { background:rgba(255,107,107,.13); color:#ff9b9b; }.health-chip.waiting_client { background:rgba(90,75,255,.15); color:#aaa2ff; }
.health-chip.complete { background:rgba(125,245,192,.16); color:#7df5c0; border-color:rgba(125,245,192,.2); }
.panel-title-row { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:.7rem; }.panel-title-row h2 { margin:0; }
.contact-row { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:.75rem; padding:.75rem 0; border-top:1px solid rgba(237,234,247,.07); }.contact-row:first-child { border-top:0; }.contact-row .app-avatar { width:38px; height:38px; font-size:.62rem; }.contact-row>div:nth-child(2) { display:grid; gap:.16rem; min-width:0; }.contact-row strong { font-size:.7rem; }.contact-row span,.contact-row a { color:var(--ink-dim); font-size:.58rem; overflow:hidden; text-overflow:ellipsis; }.primary-contact { display:inline-block; margin-left:.3rem; padding:.14rem .35rem; border-radius:999px; background:rgba(125,245,192,.12); color:#7df5c0; font-size:.45rem; text-transform:uppercase; letter-spacing:.05em; vertical-align:middle; }
@media(max-width:600px){.contact-row{grid-template-columns:auto minmax(0,1fr)}.contact-row .row-actions{grid-column:2;justify-content:flex-start}}
.project-contact-row { display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:.6rem; padding:.65rem 0; border-top:1px solid rgba(237,234,247,.07); }.project-contact-row:first-child{border-top:0}.project-contact-row>div:first-child{display:grid;gap:.15rem}.project-contact-row strong{font-size:.66rem}.project-contact-row span{color:var(--ink-dim);font-size:.55rem}.contact-role{padding:.22rem .42rem;border-radius:999px;background:rgba(90,75,255,.14);color:#aaa2ff!important;font-weight:700;text-transform:capitalize}.contact-role.lead{background:rgba(125,245,192,.12);color:#7df5c0!important}.contact-role.approver{background:rgba(200,31,224,.12);color:#e990f3!important}.contact-role.billing{background:rgba(255,209,102,.12);color:#ffd166!important}
@media(max-width:600px){.project-contact-row{grid-template-columns:minmax(0,1fr) auto}.project-contact-row .row-actions{grid-column:1/-1;justify-content:flex-start}}
.file-preview-card { display:flex; align-items:center; gap:.7rem; margin:.7rem 0 1rem; padding:.8rem; border:1px solid rgba(237,234,247,.1); border-radius:12px; background:rgba(90,75,255,.08); text-decoration:none; }.file-preview-card>span:last-child{display:grid;gap:.2rem}.file-preview-card strong{color:var(--ink);font-size:.7rem}.file-preview-card small{color:var(--ink-dim);font-size:.58rem}.file-collab-section{margin-top:1rem}.file-collab-section h4{margin:0 0 .55rem;font-size:.65rem}.file-version-row{display:flex;justify-content:space-between;gap:.7rem;padding:.55rem 0;border-top:1px solid rgba(237,234,247,.07);text-decoration:none;font-size:.58rem}.file-version-row span{color:var(--ink-dim)}.file-comment{padding:.65rem;border-radius:10px;background:rgba(237,234,247,.035);margin-bottom:.45rem}.file-comment>div{display:flex;justify-content:space-between;gap:.5rem}.file-comment strong{font-size:.62rem}.file-comment time{color:var(--ink-faint);font-size:.52rem}.file-comment p{margin:.35rem 0 0;color:var(--ink-dim);font-size:.62rem;line-height:1.5}#file-comment-form{display:grid;gap:.5rem;margin-top:.6rem}#file-comment-form .btn{justify-self:end}
span.health-chip { cursor:default; }.project-status-text { display:block; margin-top:.3rem; color:var(--ink-faint); font-size:.6rem; }
.internal-notes-panel h2 { display:flex; align-items:center; gap:.5rem; }.internal-only { padding:.18rem .4rem; border-radius:999px; background:rgba(255,107,107,.1); color:#ff9b9b; font:700 .5rem var(--font-body); text-transform:uppercase; letter-spacing:.08em; }
#internal-note-form { display:grid; gap:.5rem; margin:.7rem 0 1rem; }#internal-note-form .btn { justify-self:end; padding:.5rem .8rem; font-size:.6rem; }
.internal-notes { display:grid; gap:.55rem; }.internal-note { position:relative; padding:.75rem; border:1px solid rgba(237,234,247,.08); border-radius:10px; background:rgba(14,11,25,.42); }
.internal-note>div { display:flex; justify-content:space-between; gap:.6rem; }.internal-note strong { font-size:.68rem; }.internal-note time { color:var(--ink-faint); font-size:.56rem; }.internal-note p { margin:.45rem 0 0; color:var(--ink-dim); font-size:.68rem; line-height:1.55; }.internal-note .danger { position:absolute; right:.55rem; bottom:.5rem; opacity:0; transition:opacity .15s; }.internal-note:hover .danger { opacity:1; }
@media(max-width:600px){.internal-note .danger{position:static;opacity:1;margin-top:.55rem}.health-chip{font-size:.54rem}}
.template-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:.8rem; }
.template-card { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:start; gap:.8rem; padding:1rem; border:1px solid rgba(237,234,247,.09); border-radius:14px; background:linear-gradient(145deg,rgba(29,24,47,.8),rgba(16,13,28,.7)); }
.template-icon { display:grid; width:38px; height:38px; place-items:center; border-radius:10px; background:linear-gradient(135deg,var(--purple),var(--magenta)); color:#fff; font:800 .75rem var(--font-display); }
.template-card h2 { font-size:.82rem; }.template-card p { margin:.3rem 0; color:var(--ink-dim); font-size:.68rem; line-height:1.5; }.template-card small { color:var(--ink-faint); font-size:.58rem; line-height:1.45; }
@media(max-width:600px){.template-grid{grid-template-columns:1fr}.template-card{grid-template-columns:auto minmax(0,1fr)}.template-card>.danger{grid-column:1/-1;justify-self:end}}
.client-overview-hero { display:grid; grid-template-columns:minmax(280px,2fr) repeat(4,minmax(100px,1fr)); gap:.7rem; margin-bottom:1rem; }
.client-profile-card,.client-overview-stat { min-height:92px; padding:1rem; border:1px solid rgba(237,234,247,.09); border-radius:14px; background:linear-gradient(145deg,rgba(29,24,47,.8),rgba(16,13,28,.7)); }
.client-profile-card { display:flex; align-items:center; gap:.8rem; }.client-profile-card strong,.client-profile-card a,.client-profile-card span { display:block; }.client-profile-card a { margin:.22rem 0; color:#aaa2ff; font-size:.67rem; }.client-profile-card span { color:var(--ink-dim); font-size:.62rem; }
.client-overview-stat { display:flex; flex-direction:column; justify-content:center; }.client-overview-stat span { color:var(--ink-dim); font-size:.58rem; text-transform:uppercase; }.client-overview-stat strong { margin-top:.3rem; font:800 1.45rem var(--font-display); color:var(--ink); }
.client-overview-grid { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(300px,.75fr); gap:1rem; }
.client-project-row { display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:.8rem; padding:.75rem 0; border-top:1px solid rgba(237,234,247,.07); color:var(--ink); text-decoration:none; }.client-project-row strong,.client-project-row small { display:block; }.client-project-row small { margin-top:.2rem; color:var(--ink-dim); font-size:.58rem; }
.client-finance { display:grid; grid-template-columns:1fr 1fr; gap:.7rem; }.client-finance>div { padding:.8rem; border-radius:10px; background:rgba(237,234,247,.04); }.client-finance span,.client-finance strong { display:block; }.client-finance span { color:var(--ink-dim); font-size:.58rem; text-transform:uppercase; }.client-finance strong { margin-top:.35rem; font:700 1rem var(--font-display); }
.conversation-overview-row { width:100%; display:flex; justify-content:space-between; align-items:center; gap:.7rem; padding:.75rem 0; border:0; border-top:1px solid rgba(237,234,247,.07); background:none; color:var(--ink); text-align:left; cursor:pointer; }.conversation-overview-row strong,.conversation-overview-row small { display:block; }.conversation-overview-row small { max-width:420px; margin-top:.2rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink-dim); font-size:.58rem; }.conversation-overview-row b { flex:0 0 auto; padding:.25rem .45rem; border-radius:999px; background:rgba(200,31,224,.13); color:var(--magenta-bright); font-size:.55rem; }
@media(max-width:1100px){.client-overview-hero{grid-template-columns:repeat(4,1fr)}.client-profile-card{grid-column:1/-1}.client-overview-grid{grid-template-columns:1fr}}
@media(max-width:600px){.client-overview-hero{grid-template-columns:1fr 1fr}.client-profile-card{grid-column:1/-1}.client-project-row{grid-template-columns:1fr auto}.client-project-row>small{grid-column:1/-1}.client-finance{grid-template-columns:1fr}}
.questionnaire-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:.7rem;width:100%;padding:.7rem 0;border:0;border-top:1px solid rgba(237,234,247,.07);background:none;color:var(--ink);text-align:left;cursor:pointer}.questionnaire-row:first-child{border-top:0}.questionnaire-row>span:first-child{display:grid;gap:.2rem}.questionnaire-row strong{font-size:.68rem}.questionnaire-row small{color:var(--ink-dim);font-size:.56rem}.questionnaire-row>b{color:var(--ink-faint);font-size:.55rem}.questionnaire-status{padding:.24rem .45rem;border-radius:999px;background:rgba(237,234,247,.07);color:var(--ink-dim);font-size:.5rem;font-weight:700;text-transform:capitalize}.questionnaire-status.published{background:rgba(90,75,255,.14);color:#aaa2ff}.questionnaire-status.submitted{background:rgba(125,245,192,.12);color:#7df5c0}.question-list{display:grid;gap:.45rem;padding-left:1.2rem;color:var(--ink);font-size:.65rem}.question-list small{color:var(--ink-faint)}.questionnaire-response{padding:.8rem;border:1px solid rgba(237,234,247,.08);border-radius:12px;margin-top:.6rem}.questionnaire-response>div{display:flex;justify-content:space-between;gap:.6rem}.questionnaire-response time{color:var(--ink-faint);font-size:.54rem}.questionnaire-response p{display:grid;gap:.2rem;margin:.6rem 0 0;font-size:.62rem}.questionnaire-response p span{color:var(--ink-dim)}#client-questionnaire-form{display:grid;gap:.35rem;max-height:65vh;overflow:auto;padding-right:.2rem}
@media(max-width:600px){.questionnaire-row{grid-template-columns:minmax(0,1fr) auto}.questionnaire-row>b{grid-column:1/-1}}