/* ============================================================================
   Clay — общая дизайн-система (shared theme).
   Артефакты НАСЛЕДУЮТ эти токены по умолчанию (целостность ОС),
   но могут переопределять их у себя (уникальный дизайн отдельного артефакта).
   Токены вдохновлены дизайн-системой Kadrio (brand-градиент, motion, тёмная тема).
   ========================================================================== */
:root{
  /* поверхности */
  --clay-bg:#0b0b0e;
  --clay-surface:#141419;
  --clay-surface-2:#1b1b22;
  --clay-line:rgba(255,255,255,.08);
  --clay-line-soft:rgba(255,255,255,.05);

  /* текст */
  --clay-ink:#ededf2;
  --clay-ink-soft:#a7a7b4;
  --clay-muted:#6c6c79;

  /* бренд-акцент */
  --clay-a1:#7d7bf4;
  --clay-a2:#618ff8;
  --clay-accent:linear-gradient(120deg,var(--clay-a1),var(--clay-a2));

  /* форма и движение */
  --clay-radius:16px;
  --clay-radius-sm:11px;
  --clay-shadow:0 18px 44px -26px rgba(0,0,0,.75);
  --clay-ease:cubic-bezier(.16,1,.3,1);
  --clay-fast:140ms;
  --clay-mid:240ms;

  --clay-maxw:1180px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{color-scheme:dark}
body{
  font-family:"Manrope",system-ui,-apple-system,Segoe UI,sans-serif;
  background:var(--clay-bg);
  color:var(--clay-ink);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  background-image:
    radial-gradient(120% 80% at 100% 0%, rgba(125,123,244,.10), transparent 55%),
    radial-gradient(120% 80% at 0% 100%, rgba(97,143,248,.08), transparent 55%);
}

.clay-wrap{max-width:var(--clay-maxw); margin:0 auto; padding:0 22px 90px}

/* ---------- header ---------- */
.clay-head{padding:46px 0 10px}
.brand{
  font-size:30px; font-weight:800; letter-spacing:-.02em;
  display:inline-flex; align-items:center; gap:10px;
}
.brand .mark{
  background:var(--clay-accent);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.tagline{max-width:64ch; color:var(--clay-ink-soft); font-size:15px; margin:12px 0 0}
.meta-row{margin-top:14px; color:var(--clay-muted); font-size:12.5px; letter-spacing:.02em}

/* ---------- controls ---------- */
.controls{
  position:sticky; top:0; z-index:5;
  padding:18px 0 16px; margin-top:14px;
  background:linear-gradient(180deg,var(--clay-bg) 70%,transparent);
}
.search{
  width:100%; font:inherit; font-size:15px; color:var(--clay-ink);
  background:var(--clay-surface); border:1px solid var(--clay-line);
  border-radius:999px; padding:13px 18px; outline:none;
  transition:border-color var(--clay-fast) var(--clay-ease), box-shadow var(--clay-fast) var(--clay-ease);
}
.search::placeholder{color:var(--clay-muted)}
.search:focus{border-color:var(--clay-a1); box-shadow:0 0 0 3px rgba(125,123,244,.18)}

.tagbar{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px}
.chip{
  font:inherit; font-size:12.5px; font-weight:600; cursor:pointer;
  color:var(--clay-ink-soft); background:var(--clay-surface-2);
  border:1px solid var(--clay-line); border-radius:999px; padding:6px 13px;
  transition:all var(--clay-fast) var(--clay-ease);
}
.chip:hover{color:var(--clay-ink); transform:translateY(-1px)}
.chip.on{color:#fff; background-image:var(--clay-accent); border-color:transparent}

/* ---------- grid + cards ---------- */
.grid{
  display:grid; gap:16px; margin-top:8px;
  grid-template-columns:repeat(auto-fill,minmax(290px,1fr));
}
.card{
  display:flex; flex-direction:column; text-decoration:none; color:inherit;
  background:var(--clay-surface); border:1px solid var(--clay-line);
  border-radius:var(--clay-radius); overflow:hidden; box-shadow:var(--clay-shadow);
  transition:transform var(--clay-mid) var(--clay-ease), border-color var(--clay-mid) var(--clay-ease), box-shadow var(--clay-mid) var(--clay-ease);
  position:relative;
}
.card:hover{
  transform:translateY(-4px);
  border-color:color-mix(in srgb,var(--c,var(--clay-a1)) 55%, var(--clay-line));
  box-shadow:0 26px 50px -26px rgba(0,0,0,.8), 0 0 0 1px color-mix(in srgb,var(--c,var(--clay-a1)) 25%, transparent);
}
.card-band{height:4px; background:linear-gradient(90deg,var(--c,var(--clay-a1)),transparent)}
.card-body{padding:18px 19px 16px; display:flex; flex-direction:column; gap:9px; flex:1}
.card-top{display:flex; align-items:center; justify-content:space-between; gap:10px}
.kind{
  font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; font-weight:700;
  color:var(--c,var(--clay-a1)); opacity:.9;
}
.pin{color:var(--clay-a1); font-size:13px}
.card-title{font-size:18px; font-weight:800; letter-spacing:-.01em; margin:0; line-height:1.18}
.card-desc{font-size:13.5px; color:var(--clay-ink-soft); margin:0; flex:1}
.card-tags{display:flex; flex-wrap:wrap; gap:6px; margin-top:2px}
.card-tags .t{font-size:11px; color:var(--clay-muted); background:var(--clay-surface-2); border:1px solid var(--clay-line-soft); border-radius:6px; padding:2px 7px}
.card-foot{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:6px; padding-top:11px; border-top:1px solid var(--clay-line-soft); font-size:11.5px; color:var(--clay-muted)}
.dormant{opacity:.55; filter:saturate(.7)}
.dormant:hover{opacity:1; filter:none}
.dormant-flag{color:#b8862f}

/* ---------- empty / footer ---------- */
.empty{text-align:center; color:var(--clay-muted); padding:60px 0; font-size:14px}
.clay-foot{margin-top:46px; padding-top:18px; border-top:1px solid var(--clay-line); color:var(--clay-muted); font-size:12px; display:flex; gap:12px; flex-wrap:wrap; justify-content:space-between}
.clay-foot code{background:var(--clay-surface-2); border:1px solid var(--clay-line); border-radius:6px; padding:1px 6px; font-size:11.5px}

@media(max-width:620px){
  .clay-head{padding:34px 0 8px}
  .grid{grid-template-columns:1fr}
}

/* ============================================================================
   Утренний дашборд (Акт I «Сегодня»)
   ========================================================================== */
.clay-head{padding:30px 0 6px}
.brand .mark{display:inline-block; animation:clay-breathe 4s ease-in-out infinite}
@keyframes clay-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}

.today{margin-top:6px}
.t-hero{padding:6px 0 22px}
.t-greet{font-size:clamp(26px,4vw,40px); font-weight:800; letter-spacing:-.02em; margin:0}
.t-greet-accent{background:var(--clay-accent); -webkit-background-clip:text; background-clip:text; color:transparent}
.t-meta{margin-top:6px; color:var(--clay-muted); font-size:14px}
.t-tldr{margin-top:14px; font-size:15px; color:var(--clay-ink-soft); font-variant-numeric:tabular-nums}
.t-note{margin-top:12px; font-size:14px; color:var(--clay-ink); background:var(--clay-surface);
  border:1px solid var(--clay-line); border-left:3px solid var(--clay-a1);
  border-radius:0 10px 10px 0; padding:10px 14px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}

.today-grid{display:grid; grid-template-columns:repeat(12,1fr); gap:14px}
.widget{
  background:var(--clay-surface); border:1px solid var(--clay-line);
  border-radius:var(--clay-radius); padding:18px 19px;
  box-shadow:var(--clay-shadow), inset 0 1px 0 rgba(255,255,255,.04);
}
.w-rings{grid-column:span 6}
.w-weather{grid-column:span 3}
.w-activity{grid-column:span 3}
.w-trends{grid-column:span 7}
.w-calendar{grid-column:span 5}
.w-head{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--clay-muted); font-weight:700; margin-bottom:14px}

/* ---- rings ---- */
.t-ring-row{display:flex; gap:10px; justify-content:space-around}
.t-ring{position:relative; flex:1; text-align:center; max-width:130px}
.t-ring-svg{width:100%; height:auto; transform:rotate(-90deg)}
.t-ring-bg{fill:none; stroke:rgba(255,255,255,.07); stroke-width:9}
.t-ring-fg{fill:none; stroke-width:9; stroke-linecap:round}
.t-ring-center{position:absolute; top:42%; left:0; right:0; transform:translateY(-50%)}
.t-ring-num{font-family:Manrope,sans-serif; font-weight:800; font-size:30px; font-variant-numeric:tabular-nums}
.t-ring-label{font-size:12px; color:var(--clay-ink-soft); margin-top:-6px}

/* ---- weather ---- */
.t-wx-loading{color:var(--clay-muted); font-size:13px; padding:8px 0}
.t-wx-main{display:flex; align-items:center; gap:12px}
.t-wx-icon{width:46px; height:46px; flex:none}
.t-wx-temp{display:flex; flex-direction:column; line-height:1.05}
.t-wx-t{font-family:Manrope; font-weight:800; font-size:30px}
.t-wx-desc{font-size:13px; color:var(--clay-ink-soft)}
.t-wx-sub{margin-top:10px; font-size:12.5px; color:var(--clay-muted); font-variant-numeric:tabular-nums}
.t-wx-advice{margin-top:8px; font-size:13px; color:var(--clay-ink)}

/* ---- activity ---- */
.t-stat{display:flex; align-items:baseline; gap:8px; margin-bottom:6px}
.t-stat-num{font-family:Manrope; font-weight:800; font-size:34px; font-variant-numeric:tabular-nums}
.t-stat-unit{color:var(--clay-muted); font-size:13px}
.t-substats{display:flex; flex-wrap:wrap; gap:6px 14px; font-size:13px; color:var(--clay-ink-soft); font-variant-numeric:tabular-nums}

/* ---- trends ---- */
.t-trend-row{display:grid; grid-template-columns:96px 1fr 54px; align-items:center; gap:10px; padding:6px 0}
.t-trend-label{font-size:13px; color:var(--clay-ink-soft)}
.t-spark{height:44px}
.t-spark-svg{width:100%; height:44px}
.t-trend-delta{font-size:12.5px; text-align:right; font-variant-numeric:tabular-nums}
.t-trend-delta.up{color:#34d399}
.t-trend-delta.down{color:#f0768b}

/* ---- calendar ---- */
.t-cal-empty{color:var(--clay-muted); font-size:14px; padding:8px 0}
.t-cal-list{display:flex; flex-direction:column; gap:8px}
.t-cal-item{font-size:13.5px; color:var(--clay-ink-soft); display:flex; gap:10px}
.t-cal-time{color:var(--clay-a2); font-variant-numeric:tabular-nums; min-width:46px}

/* ---- memory section ---- */
.memory{margin-top:40px; padding-top:8px; border-top:1px solid var(--clay-line)}
.memory-head{font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--clay-muted); font-weight:700; padding:16px 0 4px}
.memory-count{color:var(--clay-a1); margin-left:6px}
.memory .controls{position:static; background:none; padding-top:8px}

@media(max-width:760px){
  .w-rings,.w-weather,.w-activity,.w-trends,.w-calendar{grid-column:span 12}
}
@media(prefers-reduced-motion:reduce){
  .brand .mark{animation:none}
}

/* ============================================================================
   Чат-строитель (панель агента)
   ========================================================================== */
.chat-fab{
  position:fixed; right:22px; bottom:22px; z-index:1000;
  width:54px; height:54px; border-radius:50%; border:none; cursor:pointer;
  background:var(--clay-accent); color:#fff; font-size:24px; line-height:1;
  box-shadow:0 12px 30px -8px rgba(125,123,244,.6);
  transition:transform var(--clay-fast) var(--clay-ease);
}
.chat-fab:hover{transform:translateY(-2px) scale(1.04)}
.chat-panel{
  position:fixed; right:22px; bottom:22px; z-index:1001;
  width:min(400px,calc(100vw - 32px)); height:min(620px,calc(100vh - 80px));
  display:flex; flex-direction:column;
  background:var(--clay-surface-2); border:1px solid var(--clay-line);
  border-radius:18px; box-shadow:0 30px 70px -20px rgba(0,0,0,.8);
  overflow:hidden;
}
.chat-head{display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--clay-line)}
.chat-title{font-weight:700; font-size:14px}
.chat-close{background:none; border:none; color:var(--clay-muted); font-size:15px; cursor:pointer}
.chat-close:hover{color:var(--clay-ink)}
.chat-log{flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:10px}
.chat-msg{font-size:14px; line-height:1.5; max-width:90%; padding:10px 13px; border-radius:13px; white-space:pre-wrap; word-break:break-word}
.chat-msg.user{align-self:flex-end; background:var(--clay-a1); color:#fff; border-bottom-right-radius:4px}
.chat-msg.assistant{align-self:flex-start; background:var(--clay-surface); border:1px solid var(--clay-line); color:var(--clay-ink); border-bottom-left-radius:4px}
.chat-meta{font-size:12px; color:var(--clay-muted); align-self:flex-start; padding:2px 4px}
.chat-meta.art{color:var(--clay-a2)}
.chat-meta.deploy{color:#34d399}
.chat-meta.err{color:#f0768b}
.chat-meta.done{color:var(--clay-ink-soft); display:flex; align-items:center; gap:10px}
.chat-reload{font:inherit; font-size:12px; cursor:pointer; color:#fff; background:var(--clay-accent); border:none; border-radius:8px; padding:4px 10px}
.chat-form{display:flex; gap:8px; padding:12px; border-top:1px solid var(--clay-line)}
.chat-input{flex:1; resize:none; font:inherit; font-size:14px; color:var(--clay-ink); background:var(--clay-surface); border:1px solid var(--clay-line); border-radius:12px; padding:10px 12px; outline:none; max-height:140px}
.chat-input:focus{border-color:var(--clay-a1)}
.chat-send{flex:none; width:40px; border:none; border-radius:12px; background:var(--clay-accent); color:#fff; font-size:18px; cursor:pointer}
.chat-send:disabled{opacity:.5; cursor:default}
@media(max-width:620px){
  .chat-panel{right:8px; bottom:8px; width:calc(100vw - 16px); height:calc(100vh - 90px)}
}