/* Cole: frosted chrome around a legible, quiet workspace. Geometry lives in preview.css. */
:root { --ease: cubic-bezier(.16, 1, .3, 1); --muted: #6d7888; }
.preview {
  background:
    radial-gradient(ellipse at 8% 8%, #d6e4f5 0, transparent 46%),
    radial-gradient(ellipse at 88% 78%, #dce5ef 0, transparent 50%),
    radial-gradient(ellipse at 48% 18%, #ffffffed 0, transparent 58%),
    linear-gradient(125deg, transparent 30%, #ffffff78 47%, transparent 64%),
    linear-gradient(145deg, #edf2f8, #f3f6fa 55%, #eeeae4);
}
.demo { isolation: isolate; column-gap: 54px; }
.chat-panel, .platform-window {
  border: 1px solid #ffffffed;
  border-radius: 16px;
  background: linear-gradient(145deg, #ffffffc9, #ffffff8f);
  box-shadow: inset 0 1px 0 #fff, 0 0 0 1px #d2dbe680, 0 5px 12px #253b5708, 0 30px 70px #253b5719;
}
.chat-panel { background: linear-gradient(160deg, #ffffff9c, #ffffff66); }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .chat-panel, .platform-window { -webkit-backdrop-filter: blur(22px) saturate(1.12); backdrop-filter: blur(22px) saturate(1.12); }
}
.chat-header, .platform-header {
  border-bottom-color: #aab8ca26;
  background: linear-gradient(180deg, #ffffffa8, #ffffff40);
  border-radius: 15px 15px 0 0;
}
.chat-header .assistant-avatar { width: 19px; height: 19px; }
.cole-identity { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.chat-header .cole-identity strong { font-size: 13px; font-weight: 580; letter-spacing: -.25px; color: #273344; }
.cole-identity small { color: #7a8798; font-size: 8px; white-space: nowrap; }
.chat-tag {
  display: inline-flex; align-items: center; gap: 5px; min-height: 19px; padding: 2px 7px;
  color: #7b8796; font-size: 8px; border: 1px solid #ffffffcc; border-radius: 20px;
  background: #ffffff70; box-shadow: 0 0 0 1px #dce3eb55;
}
.chat-tag i { width: 4px; height: 4px; border-radius: 50%; background: #91a0b2; }
.chat-welcome h1 { color: #283546; }
.chat-welcome p { color: #718095; }
.chat-user p {
  border-color: #ffffffe6;
  background: linear-gradient(145deg, #ffffffc7, #e9eef5a3);
  box-shadow: 0 0 0 1px #dce3eb66, 0 3px 8px #233a5505, inset 0 1px 0 #fff;
  color: #4c596c;
}
.chat-assistant .connector-steps li { color: #778498; transition: color 250ms; }
.chat-assistant .connector-steps li.is-current { color: #354458; }
.chat-assistant .assistant-avatar { opacity: .8; }
.chat-panel .composer, .chat-composer-idle {
  border-color: #ffffffed;
  background: linear-gradient(145deg, #ffffffed, #ffffff9c);
  box-shadow: inset 0 1px 0 #fff, 0 0 0 1px #cbd6e470, 0 5px 14px #253b5705;
}
.chat-panel .composer:focus-within { box-shadow: inset 0 1px 0 #fff, 0 0 0 1px #a5b6cd, 0 6px 20px #253b570b; }
.chat-composer-idle { color: #94a0af; }
.idle-send { background: #edf1f6; color: #8d9bb0; }
.platform-header > span { color: #728198; }
.platform-nav { background: #ffffff50; border-color: #bdc8d63b; }
.platform-nav > span { color: #8b97a7; }
.platform-nav > span.is-active { color: #344c6b; }
.platform-nav > span.is-active::after { background: #8096b4; animation: cole-underline 300ms var(--ease) both; transform-origin: left; }
.platform-window .results { background: #ffffff82; border-radius: 0 0 15px 15px; animation: cole-panel-reveal 320ms var(--ease) both; }
.platform-window .results-header h2, .platform-window .property-name, .platform-window .deal-heading h3 { color: #29384a; }
.platform-window .property > summary { transition: background 220ms, box-shadow 220ms; }
.platform-window .property > summary:hover { background: #eef3f96b; }
.platform-window .property-glyph { box-shadow: 0 0 0 1px #23374f0a, 0 3px 6px #23374f08; }
.property-detail { animation: cole-panel-reveal 460ms var(--ease) both; }
.detail-panel { animation: cole-panel-reveal 380ms var(--ease) both; }
.parcel-view { border-radius: 8px; box-shadow: 0 0 0 1px #23374f12, 0 7px 18px #23374f0c; }
.parcel-view img { animation-duration: 800ms; }
.email-card, .recorder, .queue-deal {
  border-color: #d9e1ebc9;
  background: linear-gradient(145deg, #fff, #fcfdff);
  box-shadow: inset 0 1px 0 #fff, 0 3px 8px #233a5505;
}
.email-steps { background: #eef2f6b3; border-color: #dbe3ed99; box-shadow: inset 0 1px 2px #23374f04; }
.email-steps button[aria-pressed=true] { background: linear-gradient(#fff, #fdfefe); border-color: #fff; box-shadow: 0 0 0 1px #d5dce650, 0 2px 4px #23374f0b; }
.back-to-list, .record-call { background: linear-gradient(#fff, #f7f9fc); box-shadow: inset 0 1px 0 #fff, 0 2px 4px #23374f07; }
.primary-action, .send-underwriting, .chat-panel .run-arrow {
  background: linear-gradient(180deg, #3a4451, #242c37);
  border-color: #202935; border-radius: 6px;
  box-shadow: inset 0 1px 0 #ffffff26, inset 0 0 0 1px #ffffff04, 0 2px 3px #17233412, 0 5px 10px #1723340a;
}
.primary-action:hover, .send-underwriting:hover { background: linear-gradient(180deg, #465361, #303b48); box-shadow: inset 0 1px 0 #ffffff30, 0 3px 5px #17233416; }
.primary-action:active, .send-underwriting:active { transform: translateY(1px); box-shadow: inset 0 1px 3px #0000001a; }
.queue-deal { animation: cole-arrive 500ms var(--ease) both; }
.queue-deal strong { color: #3d5068; }
.handoff-files { border-color: #d9e1ebc9; background: linear-gradient(135deg, #f4f7fbba, #ffffffb3); }
.handoff-files > span { color: #74869e; }
.queue-placeholder { opacity: .6; background: #ffffff61; }
.evidence[open], .transcript[open] { background: #fff; box-shadow: 0 6px 20px #24364b0a; }
.connector-bridge {
  position: absolute; top: 46%; left: var(--chat-width); width: 54px; height: 34px;
  display: grid; grid-template-columns: 10px 34px 10px; align-items: center; gap: 0;
}
.connector-bridge > .connector-rail { position: relative; width: 10px; height: 1px; background: #9aadc44a; }
.connector-node {
  position: relative; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid #ffffffe6; background: linear-gradient(140deg, #ffffffcf, #ffffff66);
  box-shadow: inset 0 1px 0 #fff, 0 0 0 1px #b7c7db47, 0 3px 7px #334d6c0a;
  transition: box-shadow 300ms, background 300ms;
}
.connector-node svg { width: 15px; height: 15px; stroke: #8193aa; stroke-width: 1.45; stroke-linecap: round; stroke-linejoin: round; }
.connector-bridge > .connector-label { position: absolute; top: 43px; width: 100%; text-align: center; font-size: 7px; letter-spacing: 1.15px; color: #8a9cb3; }
.connector-rail::after { content: ''; position: absolute; top: -1px; left: 0; width: 3px; height: 3px; border-radius: 50%; background: #769ac9; opacity: 0; box-shadow: 0 0 6px #83a8d8a1; }
.demo:has(.platform-window.is-triggered) .connector-bridge > .connector-rail { background: #8faed16b; animation: none; }
.demo:has(.platform-window.is-triggered) .rail-in::after { animation: cole-link-pass 310ms var(--ease) both; }
.demo:has(.platform-window.is-triggered) .rail-out::after { animation: cole-link-pass 310ms 300ms var(--ease) both; }
.demo:has(.platform-window.is-triggered) .connector-node { background: #ffffffed; box-shadow: inset 0 1px 0 #fff, 0 0 0 1px #b4c8e18c, 0 0 18px #97b7e138; }
.demo:has(.platform-window.is-triggered) .connector-node::after { content: ''; position: absolute; inset: -5px; border-radius: inherit; border: 1px solid #b1c7e357; animation: cole-link-halo 650ms var(--ease) both; }
.platform-window.is-triggered { border-color: #fff; box-shadow: inset 0 1px 0 #fff, 0 0 0 1px #a6bad4a8, 0 0 0 4px #e9f0f778, 0 26px 65px #253b5711; }
.trigger-target { box-shadow: 0 0 0 2px #b9cbe367, 0 0 0 5px #dde7f33d !important; }
.connector-steps li[data-state=done] .message-status .icon { animation: cole-confirm 260ms var(--ease) both; }
@keyframes cole-arrive { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
@keyframes cole-panel-reveal { from { opacity: 0; } to { opacity: 1; } }
@keyframes cole-underline { from { opacity: .25; transform: scaleX(.45); } to { opacity: 1; transform: none; } }
@keyframes cole-confirm { from { opacity: 0; transform: scale(.75); } to { opacity: 1; transform: none; } }
@keyframes cole-link-pass { 0% { opacity: 0; transform: translateX(-2px); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateX(9px); } }
@keyframes cole-link-halo { from { opacity: 0; transform: scale(.85); } 35% { opacity: 1; } to { opacity: 0; transform: scale(1.12); } }
@media (max-width: 820px) {
  .connector-bridge { display: none; }
  .chat-panel, .platform-window { border-radius: 12px; box-shadow: inset 0 1px 0 #fff, 0 0 0 1px #d2dbe680, 0 12px 28px #253b570a; }
  .chat-header, .platform-header { border-radius: 11px 11px 0 0; }
  .chat-header .assistant-avatar { width: 14px; height: 14px; }
  .chat-header .cole-identity strong { font-size: 11px; }
  .cole-identity { gap: 6px; }
  .cole-identity small { font-size: 7px; }
  .chat-tag { min-height: 16px; font-size: 7px; padding: 1px 5px; gap: 4px; }
  .chat-tag i { width: 3px; height: 3px; }
  .idle-send { background: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .chat-panel, .platform-window { background: #fdfefe; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  .chat-panel, .platform-window { background: #fff; border-color: #8896a9; }
  .chat-assistant .connector-steps li, .cole-identity small, .platform-nav > span { color: #46566c; }
}
@media (prefers-reduced-motion: reduce) {
  .detail-panel, .property-detail, .queue-deal, .message-status .icon, .platform-nav > span::after { animation: none !important; }
  .connector-bridge > i::after { display: none; }
}