/* Synced from docs/design/mocks/design-preview-icq6.html — ICQ 6 Aero tokens + core UI */

html { -webkit-font-smoothing: antialiased; }

body {
  font-family: Tahoma, "Segoe UI", Inter, ui-sans-serif, system-ui, sans-serif;
  margin: 0;
  font-size: 13px;
  min-height: 100dvh;
}

/* ICQ 6 light */
:root, .light {
  color-scheme: light;
  --base-00: #FFFFFF; --base-05: #FAFDFB; --base-10: #F3FAF5; --base-20: #EAF4EE;
  --base-30: #FFFFFF; --base-40: #E4F0EA; --base-50: #CFE6D8; --base-60: #9FBFB0;
  --base-70: #5A8070; --base-80: #003366; --base-90: #002244; --base-100: #001A33;
  --accent: #78B818; --accent-soft: #8CC63F; --accent-light: #C5E896; --accent-dark: #589008;
  --teal: #007878; --teal-dark: #005858; --link: #0000CC;
  --grad: linear-gradient(180deg, #F4FFD8 0%, #D8F088 12%, #A8D848 38%, #78B818 72%, #588808 100%);
  --grad-title: linear-gradient(180deg, #E0F5A0 0%, #B8E858 22%, #88C828 55%, #68A818 82%, #488008 100%);
  --gloss-highlight: inset 0 1px 0 rgba(255,255,255,0.82), inset 0 2px 6px rgba(255,255,255,0.28);
  --gloss-shadow: inset 0 -1px 0 rgba(0,0,0,0.14), 0 1px 3px rgba(40,90,50,0.22), 0 2px 6px rgba(40,90,50,0.08);
  --grad-sidebar: linear-gradient(180deg, #FAFDFB 0%, #EEF8F2 100%);
  --rail: #E4EEE8; --sidebar: #F3FAF5; --chat: #FFFFFF; --chatHeader: #F8FCFA; --composer: #FFFFFF;
  --text: #1A1A1A; --text-muted: #3D6660; --text-faint: #6A9488; --text-self: #006633;
  --border: #A8D4CC; --border-strong: #7FB8A8;
  --hover: rgba(120,184,24,0.08); --hover-strong: #E2F2EA;
  --active: #C8E6A0; --active-accent: #589008;
  --icq-panel-bg: #ECF6F4; --icq-panel-border: #A8D0D0; --icq-panel-top: #F6FCFA;
  --badge: #CC0000; --onlight: #00CC00;
  --msg-own-tint: color-mix(in srgb, var(--active) 48%, var(--chat));
  --msg-own-border: color-mix(in srgb, var(--accent-soft) 28%, var(--border));
  --msg-other-tint: var(--chat);
  --msg-other-border: var(--border);
  --input: #FFFFFF; --input-border: #A8D4CC; --scroll: #A8C8BC;
  --shadow-panel: 1px 0 0 #B0D4C8;
  --shadow-popup: 0 4px 14px rgba(40,90,70,0.14), 0 0 0 1px #A8D4CC;
  --focus-ring: 0 0 0 2px rgba(120,184,24,0.35);
  --desktop-bg: linear-gradient(160deg, #D0E4D0 0%, #B8D4B8 45%, #A0C4A0 100%);
  --title-text: #FFFFFF;
  --chrome-border: #589008;
  --window-outer: #88C0B0;
  --inset-shadow: inset 0 1px 2px rgba(0,50,40,0.07);
  --msg-hover-bg: #F0FAF6;
  --toolbar-top: #FAFFF6; --toolbar-bot: #E4F2E8;
  --ad-top: #FFFEF8; --ad-bot: #F2FAEC;
}

/* True dark */
.dark {
  color-scheme: dark;
  --base-00: #0A0A0A; --base-05: #101010; --base-10: #121212; --base-20: #1A1A1A;
  --base-30: #1E1E1E; --base-40: #242424; --base-50: #2A2A2A; --base-60: #444444;
  --base-70: #888888; --base-80: #B0B0B0; --base-90: #DCDCDC; --base-100: #FFFFFF;
  --accent: #39FF14; --accent-soft: #5AFF3A; --accent-light: #2DE010; --accent-dark: #121212;
  --teal: #39FF14; --teal-dark: #5AFF3A; --link: #7EC0FF;
  --grad: linear-gradient(180deg, #5AFF3A 0%, #39FF14 50%, #28CC0A 100%);
  --grad-title: linear-gradient(180deg, #39FF14 0%, #28CC0A 100%);
  --grad-sidebar: linear-gradient(180deg, #1A1A1A 0%, #121212 100%);
  --gloss-highlight: inset 0 1px 0 rgba(255,255,255,0.08);
  --gloss-shadow: inset 0 -1px 0 rgba(0,0,0,0.35);
  --rail: #101010; --sidebar: #121212; --chat: #121212; --chatHeader: #121212; --composer: #1A1A1A;
  --text: #FFFFFF; --text-muted: #A0A0A0; --text-faint: #707070; --text-self: #FFFFFF;
  --border: rgba(255,255,255,0.08); --border-strong: rgba(255,255,255,0.14);
  --hover: rgba(255,255,255,0.05); --hover-strong: #1E1E1E;
  --active: #1E1E1E; --active-accent: #39FF14;
  --icq-panel-top: #1E1E1E; --icq-panel-bg: #1A1A1A; --icq-panel-border: rgba(255,255,255,0.1);
  --badge: #FF4466; --onlight: #39FF14;
  --msg-own-tint: #162618;
  --msg-own-border: rgba(57,255,20,0.18);
  --msg-other-tint: #1E1E1E;
  --msg-other-border: rgba(255,255,255,0.07);
  --msg-hover-bg: #1A1A1A;
  --input: #1A1A1A; --input-border: rgba(255,255,255,0.1); --scroll: #444444;
  --shadow-panel: 1px 0 0 rgba(255,255,255,0.06);
  --shadow-popup: 0 8px 24px rgba(0,0,0,0.6);
  --focus-ring: 0 0 0 2px rgba(57,255,20,0.4);
  --desktop-bg: linear-gradient(180deg, #121212 0%, #0A0A0A 100%);
  --title-text: #FFFFFF;
  --chrome-border: #39FF14;
  --window-outer: #2A2A2A;
  --inset-shadow: inset 0 1px 2px rgba(0,0,0,0.35);
  --toolbar-top: #1E1E1E; --toolbar-bot: #1A1A1A;
  --ad-top: #1A1A1A; --ad-bot: #121212;
}

.dark .icq-section { box-shadow: inset 0 1px 0 rgba(255,255,255,0.04); }
.dark .conv-row.active { background: var(--active); box-shadow: inset 3px 0 0 var(--accent); }
.dark .conv-row.active .conv-name { color: var(--text); }
.dark .rail-btn.active { background: var(--active); color: var(--accent); box-shadow: none; }
.dark .rail-btn:hover { color: var(--accent-soft); }
.dark .msg-row.other .msg-body:not(.deleted) {
  display: inline-block; max-width: 100%; width: fit-content;
  background: var(--msg-other-tint); border: 1px solid var(--msg-other-border);
  padding: 6px 10px; border-radius: 8px;
}
.dark .msg-row.own .msg-own-panel { background: var(--msg-own-tint); border-color: var(--msg-own-border); box-shadow: none; }
.dark .composer-card:focus-within { border-color: rgba(57,255,20,0.4); box-shadow: var(--focus-ring); }
.dark .send-btn { color: var(--accent-dark); font-weight: 700; background: var(--accent); }
.dark .tool-btn:hover { color: var(--accent); }
.dark .icq-chat-header, .dark .icq-msg-viewport { border-color: rgba(255,255,255,0.08); }

.icq-desktop { background: var(--desktop-bg); color: var(--text); }
.icq-window-body { box-shadow: 0 6px 22px rgba(40,90,70,0.14); }
.dark .icq-window-body { box-shadow: 0 8px 28px rgba(0,0,0,0.45); }

.icq-section {
  margin: 4px 0 8px; padding: 0 0 6px;
  border: 1px solid var(--icq-panel-border); border-radius: 10px;
  background: linear-gradient(180deg, var(--icq-panel-top) 0%, var(--icq-panel-bg) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.75);
}
.icq-section .section-label {
  padding: 6px 10px 2px; color: var(--teal-dark); font-size: 11px;
  letter-spacing: 0.03em; text-transform: uppercase; font-weight: 700;
}
.icq-glass {
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  background: color-mix(in srgb, var(--icq-panel-bg) 88%, transparent);
}

.icq-glossy {
  background: var(--grad);
  border: 1px solid var(--chrome-border);
  box-shadow: var(--gloss-highlight), var(--gloss-shadow);
  transition: filter 0.1s ease, transform 0.08s ease, box-shadow 0.08s ease;
}
.icq-glossy:hover:not(:disabled) { filter: brightness(1.05); }
.icq-glossy:active:not(:disabled) {
  transform: translateY(1px);
  filter: brightness(0.97);
  box-shadow: inset 0 2px 5px rgba(0,0,0,0.16), inset 0 1px 0 rgba(255,255,255,0.35);
}

.icq-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  padding: 0 14px; height: 28px; border-radius: 14px; font-weight: 700; font-size: 12px;
  color: var(--teal-dark); cursor: pointer; text-decoration: none; border: none;
}
.icq-btn:disabled { opacity: 0.45; cursor: not-allowed; filter: none; transform: none; }

.settings-window-title {
  display: flex; align-items: center; gap: 6px; padding: 7px 10px;
  background: var(--grad-title); color: var(--title-text); font-weight: 700; font-size: 13px;
  border-bottom: 1px solid var(--chrome-border); text-shadow: 0 1px 0 rgba(0,0,0,0.25);
}

.icon-rail {
  width: 52px; background: var(--rail); border-right: 1px solid var(--border);
  flex-shrink: 0; align-self: stretch; display: flex; flex-direction: column;
  align-items: center; padding: 8px 0; gap: 4px;
}
.rail-btn {
  width: 36px; height: 36px; display: grid; place-items: center; border-radius: 8px;
  color: var(--text-muted); transition: background 0.12s ease, color 0.12s ease;
  position: relative; border: none; background: transparent; cursor: default;
}
.rail-btn:hover { background: var(--hover-strong); color: var(--text); }
.rail-btn.active { background: var(--active); color: var(--accent-dark); box-shadow: inset 0 0 0 1px rgba(88,144,8,0.15); }
.workspace-mark { width: 24px; height: 24px; border-radius: 5px; display: block; }

.conv-row {
  display: flex; align-items: center; gap: 10px; padding: 6px 10px; margin: 0 6px;
  border-radius: 6px; color: var(--text-muted); min-height: 44px;
}
.conv-row:hover { background: var(--hover-strong); color: var(--text); }
.conv-row.active { background: var(--active); color: var(--text); box-shadow: inset 0 0 0 1px rgba(88,144,8,0.12); }
.conv-name { font-weight: 400; font-size: 15px; line-height: 1.25; }
.conv-row.active .conv-name { font-weight: 700; color: var(--text); }

.icq-chat-header {
  position: relative; z-index: 2; margin: 8px 12px 0;
  border: 1px solid var(--border); border-radius: 6px;
  padding: 8px 12px; font-size: 13px; font-weight: 700; background: var(--chatHeader);
}
.icq-msg-viewport {
  flex: 1; min-height: 0; margin: 8px 12px; display: flex; flex-direction: column;
  border: 1px solid var(--border); border-radius: 6px; background: var(--chat);
  box-shadow: var(--inset-shadow); position: relative; overflow: hidden;
}
.msg-list-inner { max-width: 920px; margin: 0 auto; width: 100%; padding: 8px 12px; flex: 1; overflow: hidden; }
.msg-row { display: flex; gap: 12px; padding: 2px 8px; margin-top: 0; position: relative; }
.msg-row.group-start { margin-top: 8px; padding-top: 4px; }
.msg-content { flex: 1; min-width: 0; }
.msg-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 2px; }
.msg-name { font-size: 13px; font-weight: 700; line-height: 1.2; }
.msg-time { color: var(--text-faint); font-size: 11px; }
.msg-body { font-size: 13px; line-height: 1.45; color: var(--text); word-break: break-word; }
.msg-row.other .msg-name { color: var(--teal-dark); }
.msg-row.own { justify-content: flex-end; }
.msg-row.own .msg-content { max-width: 82%; display: flex; flex-direction: column; align-items: flex-end; }
.msg-row.own .msg-own-panel {
  display: inline-block; max-width: 100%; width: fit-content;
  padding: 6px 10px 8px; margin-top: 2px; border-radius: 8px;
  background: var(--msg-own-tint); border: 1px solid var(--msg-own-border);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.42);
}
.msg-row.other .msg-body {
  display: inline-block; max-width: 100%; width: fit-content;
  padding: 6px 10px; border-radius: 8px;
  background: var(--msg-other-tint); border: 1px solid var(--msg-other-border);
}

.composer-wrap { max-width: 920px; margin: 0 auto; width: 100%; position: relative; padding: 0 0 6px; }
.composer-card {
  border: 1px solid var(--input-border); background: var(--composer);
  border-radius: 8px; position: relative; display: flex; flex-direction: column;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.composer-card:focus-within { border-color: var(--accent); box-shadow: var(--focus-ring); }
.composer-input {
  background: transparent; color: var(--text); font-size: 13px; line-height: 1.466;
  outline: none; min-height: 22px; padding: 8px 12px 4px; width: 100%; box-sizing: border-box; border: 0;
}
.composer-input::placeholder { color: var(--text-faint); }
.composer-toolbar { display: flex; align-items: center; justify-content: flex-end; padding: 4px 8px 8px; gap: 8px; }

.tool-btn {
  width: 32px; height: 32px; display: grid; place-items: center; border-radius: 6px;
  color: var(--text-muted); border: none; background: transparent; cursor: pointer;
}
.tool-btn:hover { background: var(--hover-strong); color: var(--text); }

.send-btn {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 6px; color: #fff; background: var(--accent);
  cursor: pointer; border: none; transition: opacity 0.12s ease;
}
.send-btn:hover:not(:disabled) { filter: brightness(1.06); }

.search-input {
  width: 100%; background: var(--base-30); color: var(--text);
  border: 1px solid var(--input-border); border-radius: 6px;
  padding: 6px 10px; font-size: 13px; outline: none;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
  box-shadow: var(--inset-shadow); box-sizing: border-box;
}
.search-input::placeholder { color: var(--text-faint); }
.search-input:focus { border-color: var(--accent); box-shadow: var(--focus-ring); }

.text-muted { color: var(--text-muted); }
.text-faint { color: var(--text-faint); }