/* Argus AI conversation interface */
:root {
  --argus-bg: #020914;
  --argus-panel: #071525;
  --argus-panel-2: #0a1b30;
  --argus-blue: #159cff;
  --argus-cyan: #26dfff;
  --argus-teal: #35efc1;
  --argus-violet: #8b68ff;
}

body { background: var(--argus-bg); }
.shell {
  grid-template-columns: 260px minmax(0, 1fr);
  background:
    radial-gradient(circle at 78% 15%, rgba(21,156,255,.12), transparent 28%),
    radial-gradient(circle at 94% 86%, rgba(38,223,255,.09), transparent 23%),
    linear-gradient(145deg, #020914, #061221 58%, #020914);
}
.shell::after {
  position: fixed;
  right: -12vw;
  bottom: -27vw;
  width: 64vw;
  height: 64vw;
  border: 1px solid rgba(38,223,255,.13);
  border-radius: 50%;
  box-shadow: 0 0 70px rgba(21,156,255,.09), inset 0 0 80px rgba(21,156,255,.035);
  content: "";
  pointer-events: none;
}

aside {
  padding: 0 10px 12px;
  background: linear-gradient(180deg, rgba(5,20,36,.98), rgba(3,13,25,.98));
  border-right: 1px solid rgba(81,178,255,.19);
  box-shadow: 18px 0 60px rgba(0,0,0,.16);
}
.side-top { height: 218px; align-items: flex-start; padding-top: 17px; }
.workspace-logo { min-width: 170px; }
.workspace-logo .argus-symbol { width: 142px; height: 142px; }
.workspace-logo b { margin-top: -2px; color: #f3f8ff; font-size: 27px; letter-spacing: .29em; text-indent: .29em; text-shadow: none; }
.workspace-logo small { margin-top: 7px; color: #68cfff; font-size: 9px; font-weight: 800; letter-spacing: .27em; text-indent: .27em; }
.new-chat {
  width: calc(100% - 10px);
  margin: 6px 5px 24px;
  padding: 14px 17px;
  border: 1px solid rgba(62,213,255,.22);
  border-radius: 12px;
  text-align: left;
  background: linear-gradient(105deg, #087bdc, #13a4ff 57%, #167cff);
  box-shadow: 0 10px 28px rgba(0,119,255,.24), inset 0 1px rgba(255,255,255,.18);
}
.history-label { padding-inline: 12px; color: #7990ad; font-size: 11px; letter-spacing: .1em; }
.chat-item { min-height: 45px; padding: 9px 12px; border: 1px solid transparent; border-radius: 10px; color: #aebfd3; }
.chat-item::before { color: #63caff; content: "▢"; font-size: 14px; }
.chat-item:hover, .chat-item.active { background: linear-gradient(90deg, rgba(21,156,255,.17), rgba(21,156,255,.08)); border-color: rgba(69,183,255,.16); }
.user-panel { margin-top: 8px; }
.sidebar-parent-brand { display: none; }
.user-row { padding: 13px 9px 3px; }

main { grid-template-rows: 61px minmax(0,1fr) auto; }
header {
  padding: 0 28px;
  background: rgba(2,9,20,.76);
  border-bottom: 1px solid rgba(96,176,255,.16);
  backdrop-filter: blur(18px);
}
.header-identity { display: flex; align-items: center; gap: 14px; }
.header-identity strong { color: #f4f8ff; font-size: 21px; letter-spacing: -.02em; }
.header-identity span { display: flex; align-items: center; gap: 7px; color: #87a2bf; font-size: 12px; }
.header-identity i { width: 9px; height: 9px; border-radius: 50%; background: var(--argus-teal); box-shadow: 0 0 0 4px rgba(53,239,193,.08), 0 0 13px rgba(53,239,193,.65); }
#argus-status.offline { color: #ff8f9d; }
#argus-status.offline i { background: #ff6f80; box-shadow: 0 0 0 4px rgba(255,111,128,.08); }
.model-button { margin-left: auto; padding: 8px 16px; border: 1px solid rgba(107,179,255,.27); border-radius: 20px; font-size: 13px; background: rgba(8,26,45,.72); }
.model-button:hover { border-color: rgba(38,223,255,.44); background: rgba(15,50,80,.75); }
.private-pill { margin-left: 0; }
.header-settings { width: 38px; height: 38px; border: 0; background: transparent; font-size: 14px; letter-spacing: 2px; }
#model-menu { left: auto; right: 112px; top: 51px; }

.conversation { position: relative; }
.conversation::before {
  position: fixed;
  z-index: -1;
  right: 6vw;
  top: 18vh;
  width: 26vw;
  height: 26vw;
  min-width: 300px;
  min-height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(21,156,255,.08), transparent 64%);
  content: "";
  filter: blur(10px);
}
.welcome { max-width: 900px; margin: clamp(45px, 8vh, 94px) auto 30px; text-align: center; }
.welcome-argus { width: 104px; height: 104px; margin: 0 auto 2px; filter: drop-shadow(0 14px 34px rgba(21,156,255,.42)); }
.welcome-kicker { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 6px; color: var(--argus-teal); font-size: 10px; font-weight: 800; letter-spacing: .22em; }
.welcome-kicker i { width: 7px; height: 7px; border-radius: 50%; background: var(--argus-teal); box-shadow: 0 0 10px var(--argus-teal); }
.welcome h2 { margin: 13px 0 10px; font-size: clamp(37px, 4vw, 57px); font-weight: 690; letter-spacing: -.045em; background: none; color: #f5f9ff; }
.welcome h2 span { color: transparent; background: linear-gradient(90deg, var(--argus-cyan), #54a6ff 55%, var(--argus-violet)); background-clip: text; }
.welcome > p { max-width: 650px; margin-inline: auto; color: #8198b5; font-size: 16px; }
.suggestions { grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 34px; }
.suggestions button { min-height: 94px; padding: 16px; border-radius: 13px; text-align: left; background: linear-gradient(145deg, rgba(10,29,51,.86), rgba(4,18,33,.82)); }
.suggestions button::before { display: block; margin-bottom: 10px; color: var(--argus-cyan); content: "✦"; font-size: 15px; }
.suggestions button:nth-child(2)::before { color: var(--argus-violet); }
.suggestions button:nth-child(3)::before { color: #4e8cff; content: "</>"; font: 700 11px/1 ui-monospace, monospace; }
.suggestions button:nth-child(4)::before { color: var(--argus-teal); content: "▥"; }
.suggestions button b, .suggestions button span { display: block; }
.suggestions button b { color: #eaf4ff; font-size: 13px; }
.suggestions button span { margin-top: 3px; color: #738da9; font-size: 11px; }

.messages { max-width: 960px; padding-top: 34px; }
.message { grid-template-columns: 38px minmax(0,1fr); gap: 15px; }
.message.user { padding-left: 9%; }
.message.user .user-message { max-width: 82%; }
.message.user .bubble { background: linear-gradient(135deg, #0e467f, #1269bd); border: 1px solid rgba(92,190,255,.23); border-radius: 16px 16px 4px 16px; box-shadow: 0 8px 24px rgba(0,0,0,.16); }
.ai-avatar { width: 36px; height: 36px; border-radius: 50%; }
.ai-avatar img { width: 34px; height: 34px; }
.message.assistant .assistant-response { padding: 13px 15px; border: 1px solid rgba(77,165,243,.17); background: linear-gradient(145deg, rgba(6,22,39,.78), rgba(5,17,31,.68)); box-shadow: 0 10px 34px rgba(0,0,0,.12); }
.content { color: #dce8f5; line-height: 1.65; }
.content pre { margin: 14px 0 4px; padding: 42px 17px 17px; border-radius: 12px; box-shadow: inset 0 1px rgba(255,255,255,.02); }
.code-shell { position: relative; }
.code-toolbar { position: absolute; z-index: 2; top: 15px; right: 8px; display: flex; gap: 5px; }
.code-toolbar button { padding: 5px 9px; border: 1px solid rgba(112,187,255,.2); border-radius: 7px; color: #9ac8ef; background: #0a1b30; cursor: pointer; font-size: 10px; }
.code-toolbar button:hover { color: #fff; border-color: rgba(38,223,255,.4); }

footer { padding: 8px 22px max(12px, env(safe-area-inset-bottom)); background: linear-gradient(transparent, rgba(2,9,20,.98) 18%); }
.quick-modes { display: flex; justify-content: center; gap: 7px; max-width: 860px; margin: 0 auto 8px; }
.quick-modes button { padding: 7px 13px; border: 1px solid rgba(99,173,240,.2); border-radius: 20px; color: #8fa8c3; background: rgba(6,22,39,.76); cursor: pointer; font-size: 11px; }
.quick-modes button span { margin-right: 5px; color: #5bc8ff; font-family: ui-monospace, monospace; }
.quick-modes button:hover { color: #eaf7ff; border-color: rgba(38,223,255,.36); }
.quick-modes button.active { color: #eafcff; border-color: rgba(53,239,193,.48); background: rgba(18,99,91,.25); box-shadow: 0 0 18px rgba(53,239,193,.08); }
.quick-modes button[data-quick-mode="images"].active { border-color: rgba(139,104,255,.55); background: rgba(81,55,148,.28); }
.quick-modes button[data-quick-mode="coding"].active { border-color: rgba(55,145,255,.55); background: rgba(27,76,148,.3); }
.composer { max-width: 920px; min-height: 61px; padding: 10px 10px; border-radius: 31px; background: rgba(6,22,39,.96); border-color: rgba(91,176,255,.34); box-shadow: 0 14px 48px rgba(0,0,0,.34), inset 0 1px rgba(255,255,255,.025); }
.composer:focus-within { border-color: var(--argus-cyan); }
.composer textarea { padding: 10px 9px; }
.compose-icon { color: #81a5c8; }
.voice-input.listening { color: var(--argus-teal); background: rgba(53,239,193,.12); box-shadow: 0 0 16px rgba(53,239,193,.16); }
.send { background: linear-gradient(135deg, #1e6dff, #19c6ff); box-shadow: 0 5px 16px rgba(21,156,255,.25); font-size: 17px; }
.workspace-controls, .folder-list, .changed-files-panel, .attachment, .mode-suggestion { max-width: 920px; }
.notice { margin-top: 5px; }

@media (max-width: 1000px) {
  .suggestions { grid-template-columns: 1fr 1fr; }
  .welcome { margin-top: 34px; }
  .welcome-argus { width: 82px; height: 82px; }
}
@media (max-width: 760px) {
  .shell { grid-template-columns: 1fr; }
  aside { width: min(310px, 88vw); }
  .side-top { height: 150px; }
  .workspace-logo .argus-symbol { width: 86px; height: 86px; }
  .workspace-logo b { font-size: 20px; }
  header { padding: 0 12px; }
  .header-identity strong { font-size: 17px; }
  .header-identity span, .private-pill { display: none; }
  .model-button { padding-inline: 11px; }
  #model-menu { right: 12px; }
  .welcome { margin-top: 24px; padding-inline: 17px; }
  .welcome h2 { font-size: 34px; }
  .welcome > p { font-size: 14px; }
  .suggestions { gap: 8px; margin-top: 24px; }
  .suggestions button { min-height: 82px; padding: 12px; }
  .quick-modes { overflow-x: auto; justify-content: flex-start; padding-inline: 4px; }
  .quick-modes button { flex: 0 0 auto; }
  footer { padding-inline: 10px; }
  .message.user { padding-left: 0; }
}

@media (prefers-reduced-motion: no-preference) {
  .welcome-argus { animation: argus-breathe 4s ease-in-out infinite; }
  @keyframes argus-breathe { 50% { transform: translateY(-4px); filter: drop-shadow(0 18px 40px rgba(38,223,255,.5)); } }
}