/* RAYON · Agent Cockpit — design tokens & shared styles */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  color-scheme: light;

  --bg:        #f3f5f9;
  --bg-2:      #f7f8fb;
  --surface:   #ffffff;
  --surface-2: #ffffff;
  --surface-3: #eef2f7;
  --surface-4: #e6ecf4;
  --surface-hover: #edf2fb;
  --border:    rgba(21,35,58,0.105);
  --border-2:  rgba(21,35,58,0.18);
  --border-3:  rgba(21,35,58,0.28);

  --text:      #111420;
  --text-2:    #4a5363;
  --text-3:    #687386;
  --text-4:    #a4adba;

  --accent:    #5b45ff;
  --accent-2:  #7b61ff;
  --accent-3:  #a394ff;
  --accent-bg: rgba(91,69,255,0.105);
  --accent-bd: rgba(91,69,255,0.30);
  --focus-ring: 0 0 0 3px rgba(91,69,255,0.14);
  --logo-ink:  #111420;
  --logo-accent: #0070ff;
  --logo-surface: #ffffff;
  --logo-border: rgba(21,35,58,0.12);
  --music:     #ffcf24;
  --music-bg:  rgba(255,207,36,0.16);
  --crm-blue:  #1787ff;
  --mobile-chrome-bg: rgba(255,255,255,.94);
  --mobile-chrome-shadow: 0 8px 24px rgba(20,31,52,.04);
  --mobile-bottom-shadow: 0 -14px 34px rgba(20,31,52,.08);
  --control-shadow: 0 1px 0 rgba(255,255,255,0.74) inset, 0 6px 16px rgba(20,31,52,0.045);
  --liquid-nav-bg: rgba(255,255,255,.58);
  --liquid-nav-bd: rgba(255,255,255,.72);
  --liquid-nav-bd-2: rgba(21,35,58,.12);
  --liquid-nav-layer-1: rgba(255,255,255,.62);
  --liquid-nav-layer-2: rgba(222,229,241,.30);
  --liquid-nav-sheen: rgba(255,255,255,.50);
  --liquid-nav-inner-bd: rgba(255,255,255,.22);
  --liquid-nav-top-gloss: rgba(255,255,255,.42);
  --liquid-nav-shadow: 0 20px 48px rgba(20,31,52,.17), 0 8px 18px rgba(20,31,52,.08), inset 0 1px 0 rgba(255,255,255,.76), inset 0 -1px 0 rgba(21,35,58,.08);
  --liquid-nav-active-bg: rgba(255,255,255,.52);
  --liquid-nav-active-bg-2: rgba(237,242,250,.30);
  --liquid-nav-active-sheen: rgba(255,255,255,.54);
  --liquid-nav-active-shadow: inset 0 1px 0 rgba(255,255,255,.70), 0 7px 16px rgba(20,31,52,.09);
  --liquid-nav-badge-bg: rgba(255,255,255,.64);
  --liquid-nav-badge-active-bg: rgba(17,20,32,.74);

  --mint:      #0fa873;
  --mint-bg:   rgba(15,168,115,0.10);
  --mint-bd:   rgba(15,168,115,0.28);

  --amber:     #d68b00;
  --amber-bg:  rgba(214,139,0,0.11);
  --amber-bd:  rgba(214,139,0,0.28);

  --rose:      #e5485d;
  --rose-bg:   rgba(229,72,93,0.09);
  --rose-bd:   rgba(229,72,93,0.28);

  --violet:    #7c5cff;
  --violet-bg: rgba(124,92,255,0.10);
  --violet-bd: rgba(124,92,255,0.28);

  --sky:       #1687c7;
  --sky-bg:    rgba(22,135,199,0.10);
  --sky-bd:    rgba(22,135,199,0.28);

  --font-sans: 'Manrope', 'Inter', -apple-system, system-ui, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --font-serif:'Inter', -apple-system, system-ui, sans-serif;
  --tg-safe-top: 0px;
  --tg-safe-bottom: 0px;
}

html[data-theme="dark"] {
  color-scheme: dark;

  --bg:        #07080a;
  --bg-2:      #0d0e11;
  --surface:   rgba(255,255,255,0.035);
  --surface-2: rgba(255,255,255,0.052);
  --surface-3: rgba(255,255,255,0.075);
  --surface-4: rgba(255,255,255,0.105);
  --surface-hover: rgba(255,255,255,0.082);
  --border:    rgba(255,255,255,0.075);
  --border-2:  rgba(255,255,255,0.115);
  --border-3:  rgba(255,255,255,0.18);

  --text:      #f7f8f8;
  --text-2:    #c7ccd4;
  --text-3:    #8a9099;
  --text-4:    #626771;

  --accent:    #7170ff;
  --accent-2:  #8b8aff;
  --accent-3:  #b8b7ff;
  --accent-bg: rgba(113,112,255,0.13);
  --accent-bd: rgba(113,112,255,0.38);
  --focus-ring: 0 0 0 3px rgba(113,112,255,0.14);
  --logo-ink: #f7f8f8;
  --logo-accent: #4d9cff;
  --logo-surface: rgba(255,255,255,0.045);
  --logo-border: rgba(255,255,255,0.16);
  --mobile-chrome-bg: rgba(11,12,16,.88);
  --mobile-chrome-shadow: 0 8px 24px rgba(0,0,0,.22);
  --mobile-bottom-shadow: 0 -14px 34px rgba(0,0,0,.34);
  --control-shadow: inset 0 1px 0 rgba(255,255,255,0.055), 0 6px 16px rgba(0,0,0,0.18);
  --liquid-nav-bg: rgba(20,22,27,.52);
  --liquid-nav-bd: rgba(255,255,255,.15);
  --liquid-nav-bd-2: rgba(255,255,255,.07);
  --liquid-nav-layer-1: rgba(255,255,255,.055);
  --liquid-nav-layer-2: rgba(255,255,255,.020);
  --liquid-nav-sheen: rgba(255,255,255,.080);
  --liquid-nav-inner-bd: rgba(255,255,255,.09);
  --liquid-nav-top-gloss: rgba(255,255,255,.10);
  --liquid-nav-shadow: 0 24px 58px rgba(0,0,0,.48), 0 8px 18px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.10), inset 0 -1px 0 rgba(0,0,0,.24);
  --liquid-nav-active-bg: rgba(255,255,255,.080);
  --liquid-nav-active-bg-2: rgba(255,255,255,.032);
  --liquid-nav-active-sheen: rgba(255,255,255,.070);
  --liquid-nav-active-shadow: inset 0 1px 0 rgba(255,255,255,.11), 0 8px 18px rgba(0,0,0,.18);
  --liquid-nav-badge-bg: rgba(255,255,255,.12);
  --liquid-nav-badge-active-bg: rgba(255,255,255,.15);

  --mint:      #36d399;
  --mint-bg:   rgba(54,211,153,0.11);
  --mint-bd:   rgba(54,211,153,0.32);

  --amber:     #f6c65b;
  --amber-bg:  rgba(246,198,91,0.10);
  --amber-bd:  rgba(246,198,91,0.30);

  --rose:      #ff6b7a;
  --rose-bg:   rgba(255,107,122,0.105);
  --rose-bd:   rgba(255,107,122,0.32);

  --violet:    #9b8cff;
  --violet-bg: rgba(155,140,255,0.11);
  --violet-bd: rgba(155,140,255,0.32);

  --sky:       #6fc7ff;
  --sky-bg:    rgba(111,199,255,0.10);
  --sky-bd:    rgba(111,199,255,0.30);
}

* { box-sizing: border-box; }

html {
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  touch-action: manipulation;
  overscroll-behavior: none;
}

html,
body {
  width: 100%;
  min-height: 100%;
}

body {
  font-family: var(--font-sans);
  color: var(--text);
  background:
    radial-gradient(circle at 10% -10%, rgba(255,207,36,.22), transparent 28%),
    radial-gradient(circle at 92% -4%, rgba(23,135,255,.13), transparent 30%),
    linear-gradient(180deg, #f7f8fb 0%, var(--bg) 42%, #eef2f8 100%);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
  margin: 0;
  font-feature-settings: "cv01", "ss03";
  letter-spacing: -0.005em;
}

html[data-theme="dark"] body {
  background:
    radial-gradient(circle at 10% -10%, rgba(113,112,255,.11), transparent 30%),
    radial-gradient(circle at 92% -4%, rgba(54,211,153,.07), transparent 28%),
    linear-gradient(180deg, #090a0d 0%, var(--bg) 48%, #050608 100%);
}

input,
textarea,
select,
button {
  touch-action: manipulation;
}

input,
textarea,
select {
  font-size: 16px !important;
  -webkit-user-select: text;
  user-select: text;
}

.mono { font-family: var(--font-mono); font-feature-settings: "ss01","cv11"; }
.serif { font-family: var(--font-serif); }

/* — small reusable bits — */
.dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 99px;
  background: currentColor;
}
.dot-live {
  position: relative;
}
.dot-live::after {
  content:""; position:absolute; inset:-3px; border-radius:99px;
  background: currentColor; opacity:.35; animation: pulse 1.8s ease-in-out infinite;
}
@keyframes pulse {
  0%,100% { transform: scale(1); opacity:.35; }
  50%     { transform: scale(2.0); opacity:0; }
}

@keyframes blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}
.caret::after {
  content:"▍"; margin-left:2px; color: var(--accent);
  animation: blink 1s steps(1) infinite;
}

@keyframes typing {
  0%, 60%, 100% { transform: translateY(0); opacity: .4; }
  30%           { transform: translateY(-3px); opacity: 1; }
}
.typing { display: inline-flex; gap: 3px; align-items:center; }
.typing i {
  display:inline-block; width:4px; height:4px; border-radius:99px;
  background: currentColor; animation: typing 1.2s infinite;
}
.typing i:nth-child(2) { animation-delay: .15s; }
.typing i:nth-child(3) { animation-delay: .30s; }

/* sparkline-ish bars used in cockpit cards */
@keyframes barpulse {
  0%, 100% { opacity: .25; }
  50%      { opacity: 1; }
}

/* spinner used in inline busy buttons (Сохранить, agent-draft request) */
@keyframes rayon-spin {
  to { transform: rotate(360deg); }
}
.rayon-spinner {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 1.5px solid currentColor;
  border-top-color: transparent;
  border-radius: 99px;
  animation: rayon-spin 0.7s linear infinite;
  vertical-align: -2px;
}

/* full-screen bootstrap loader */
@keyframes rayon-loader-spin {
  to { transform: rotate(360deg); }
}
.app-boot-loader {
  min-height: var(--tg-viewport-height, 100dvh);
  height: var(--tg-viewport-height, 100dvh);
  width: 100%;
  display: grid;
  place-items: center;
  background: var(--bg);
  color: var(--text);
  overflow: hidden;
}
.app-boot-loader__spinner {
  width: 34px;
  height: 34px;
  border: 3px solid rgba(17, 20, 32, .14);
  border-color: color-mix(in srgb, var(--text) 14%, transparent);
  border-top-color: var(--accent);
  border-radius: 999px;
  animation: rayon-loader-spin .75s linear infinite;
}

/* shimmer block used while the agent draft is being generated */
@keyframes rayon-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}
.rayon-shimmer {
  background: linear-gradient(90deg,
    rgba(255,255,255,0.02) 0%,
    rgba(255,255,255,0.10) 50%,
    rgba(255,255,255,0.02) 100%);
  background-size: 200% 100%;
  animation: rayon-shimmer 1.4s ease-in-out infinite;
  border-radius: 8px;
}

/* slide-down toast used by agent.jsx settings save flow */
@keyframes rayon-toast-in {
  from { transform: translateY(-12px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.rayon-toast {
  animation: rayon-toast-in 0.18s ease-out;
}

/* — surfaces — */
.card {
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,255,255,0.92));
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(20,31,52,0.065), 0 1px 0 rgba(255,255,255,0.84) inset;
}
html[data-theme="dark"] .card {
  background: linear-gradient(180deg, rgba(255,255,255,0.052), rgba(255,255,255,0.028));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.055), 0 18px 52px rgba(0,0,0,0.26);
}
.card:hover {
  border-color: var(--border-2);
}

button, input, textarea, select {
  font-family: var(--font-sans);
}
input, textarea, select {
  background: var(--surface-2);
  color: var(--text);
  border-color: var(--border) !important;
  outline: none;
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(20,31,52,0.025);
}
input:focus, textarea:focus, select:focus {
  border-color: var(--accent-bd) !important;
  box-shadow: var(--focus-ring);
}
button {
  transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease, opacity .16s ease;
}
button:hover { transform: translateY(-1px); }
button:active { transform: translateY(0); opacity: .86; }

/* scrollbar */
.scroller::-webkit-scrollbar { width: 6px; height: 6px; }
.scroller::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 99px;}
.scroller::-webkit-scrollbar-track { background: transparent; }

/* subtle grid backdrop for cockpit hero areas */
.grid-bg {
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 32px 32px;
}

/* noise overlay for premium feel */
.noise {
  position: relative;
}
.noise::after {
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity:.4; mix-blend-mode: overlay;
}

/* glow */
.glow-accent { box-shadow: 0 0 0 1px var(--accent-bd), 0 16px 50px -16px rgba(113,112,255,0.42); }
.glow-mint   { box-shadow: 0 0 0 1px var(--mint-bd),   0 16px 50px -16px rgba(54,211,153,0.24); }

/* slider track for temperament */
input[type=range].mixer {
  -webkit-appearance: none; appearance: none;
  height: 22px; background: transparent; width: 100%; margin: 0;
}
input[type=range].mixer::-webkit-slider-runnable-track {
  height: 4px; background: var(--surface-3); border-radius: 99px;
}
input[type=range].mixer::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 16px; height: 16px; border-radius: 99px; margin-top: -6px;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(113,112,255,.16), 0 2px 4px rgba(0,0,0,.4);
  cursor: pointer;
}

/* Mobile dossier fixes: prevent long artist URLs and score blocks from
   overflowing narrow Telegram WebApp screens. */
@media (max-width: 460px) {
  .dossier-section {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
  .dossier-header {
    display: grid !important;
    grid-template-columns: 74px minmax(0, 1fr);
    align-items: start !important;
    padding: 16px 14px !important;
    gap: 12px !important;
  }
  .dossier-cover {
    width: 74px !important;
    height: 74px !important;
    border-radius: 13px !important;
  }
  .dossier-artist-title {
    font-size: clamp(20px, 7vw, 30px) !important;
    line-height: 1.04;
    max-width: 100%;
    word-break: normal;
    overflow-wrap: anywhere;
  }
  .dossier-profile-url {
    display: flex !important;
    width: 100%;
    max-width: 100% !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .dossier-score {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
    margin-left: 0 !important;
    min-width: 0 !important;
    padding: 9px 12px !important;
    text-align: left !important;
  }
  .dossier-score > div:nth-child(2) {
    font-size: 26px !important;
    margin-top: 0 !important;
  }
  .dossier-score > div:nth-child(3) {
    text-align: right;
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .dossier-open-web-results {
    grid-template-columns: 1fr !important;
  }
  .dossier-open-web-summary,
  .dossier-open-web-insights,
  .dossier-open-web-result {
    border-radius: 14px !important;
  }
  .dossier-action-bar {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    align-items: stretch !important;
    gap: 10px !important;
    padding: 14px 14px calc(96px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .dossier-action-copy {
    grid-column: 1 / -1;
    min-width: 0 !important;
    overflow-wrap: anywhere;
  }
  .dossier-action-bar button {
    width: 100% !important;
    min-width: 0 !important;
    justify-content: center !important;
    white-space: normal !important;
    line-height: 1.2 !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}

@media print {
  body { background: #fff; color: #111; }
  .dossier-header, .card { break-inside: avoid; }
  button, header, aside { display: none !important; }
}