/* Eagle 1.2.x interface polish: one spacing/type scale, right-sized bubbles, skeletons, dark and Fluid styles.
   Classic Eagle (compact blue + paper-white) stays the default. */
:root {
  --eg-space-1: clamp(2px, 0.25vw + 1px, 4px);
  --eg-space-2: clamp(4px, 0.4vw + 2px, 8px);
  --eg-space-3: clamp(8px, 0.6vw + 4px, 12px);
  --eg-radius: clamp(14px, 1vw + 10px, 18px);
  --eg-bubble-max: 78%;
  --eg-text: clamp(14px, 0.25vw + 13px, 15.5px);
  --eg-small: clamp(11px, 0.15vw + 10.5px, 12px);
  --eg-spring: cubic-bezier(.34, 1.56, .64, 1);
}
@media (min-width: 700px) { :root { --eg-bubble-max: 64%; } }
@media (min-width: 1100px) { :root { --eg-bubble-max: min(56%, 620px); } }

/* Right-sized bubbles: wrap to content, inline time + ticks at the end of the last line, grouped runs. */
#messages .bubble { max-width: var(--eg-bubble-max); padding: 6px 10px 5px; margin-top: 0; margin-bottom: 2px; font-size: var(--eg-text); line-height: 1.38; overflow-wrap: anywhere; }
#messages .bubble.eg-run-end { margin-bottom: 8px; }
#messages .bubble.eg-run-mid:not(.mine), #messages .bubble.eg-run-end:not(.mine).eg-grouped { border-top-left-radius: 6px; }
#messages .bubble.mine.eg-grouped { border-top-right-radius: 6px; }
#messages .bubble .meta-sender { font-weight: 650; color: var(--accent-strong); }
#messages .bubble.mine .meta-sender, #messages .bubble.eg-grouped .meta-sender, #messages .bubble .meta-time { display: none; }
#messages .bubble.mine > .meta.eg-head, #messages .bubble.eg-grouped > .meta.eg-head { display: none; }
#messages .bubble > .meta.eg-head { margin: 0 0 1px; font-size: var(--eg-small); }
#messages .bubble .body-text::after { content: ""; display: inline-block; width: var(--eg-stamp-w, 52px); }
#messages .bubble.mine .body-text::after { --eg-stamp-w: 68px; width: 68px; }
#messages .bubble .eg-stamp { position: absolute; right: 9px; bottom: 4px; font-size: 11px; line-height: 1; color: var(--muted); white-space: nowrap; pointer-events: none; }
#messages .bubble.mine .eg-stamp { right: 28px; }
#messages .bubble > .receipt { position: absolute; right: 8px; bottom: 2px; margin: 0; transform: scale(.85); }
#messages .bubble.image-bubble .body-text::after { display: none; }
#messages .bubble.image-bubble .eg-stamp { color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.emoji-only #messages .bubble, #messages .bubble.eg-emoji-only { background: transparent; box-shadow: none; padding: 0 4px 14px; }
#messages .bubble.eg-emoji-only .body-text { font-size: clamp(28px, 4vw, 34px); line-height: 1.1; }
#messages .bubble.eg-emoji-only .body-text::after { display: none; }

/* Right-sized rows and cards. */
.chat-row { padding-block: clamp(7px, 0.6vw + 4px, 10px); }
.chat-row .row-subtitle { font-size: var(--eg-small); }

/* Skeleton loaders. */
.eg-skeleton { display: grid; gap: 10px; padding: 10px 12px; }
.eg-skeleton-row { display: grid; grid-template-columns: 40px 1fr; gap: 10px; align-items: center; }
.eg-skeleton-row i, .eg-skeleton-row b, .eg-skeleton-row s { display: block; border-radius: 999px; background: linear-gradient(90deg, var(--surface-soft) 25%, color-mix(in srgb, var(--surface-soft) 55%, var(--surface)) 50%, var(--surface-soft) 75%); background-size: 200% 100%; animation: eg-shimmer 1.2s linear infinite; }
.eg-skeleton-row i { width: 40px; height: 40px; }
.eg-skeleton-row b { height: 11px; width: 55%; } .eg-skeleton-row s { height: 9px; width: 80%; margin-top: 6px; }
@keyframes eg-shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .eg-skeleton-row i, .eg-skeleton-row b, .eg-skeleton-row s { animation: none; } }

/* Better empty states. */
.empty-chats { display: grid; justify-items: center; gap: 8px; padding: 36px 20px; text-align: center; color: var(--muted); }
.empty-chats .eg-empty-icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-strong); font-size: 26px; }
.empty-chats p { margin: 0; color: var(--ink); font-weight: 650; }
.empty-chats small { max-width: 30ch; }

/* Appearance style picker. */
.appearance-style-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; border: 0; padding: 0; margin: 0 0 12px; }
.appearance-style-options legend { font-weight: 650; margin-bottom: 6px; }
.appearance-style-option { display: grid; gap: 6px; justify-items: center; padding: 8px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; font-size: var(--eg-small); }
.appearance-style-option:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent); }
.appearance-style-option input { position: absolute; opacity: 0; pointer-events: none; }
.appearance-style-preview { width: 100%; height: 34px; border-radius: 8px; background: #fafcfe; border: 1px solid #dbe4eb; }
[data-style="dark"] .appearance-style-preview { background: #121a22; }
[data-style="fluid"] .appearance-style-preview { background: linear-gradient(135deg, rgba(255,255,255,.85), rgba(200,225,240,.6)), linear-gradient(45deg, #9fd0ee, #e7f2fa); }

/* Dark style (AA contrast: ink #e6edf2 on #121a22 = 14.9:1; muted #9fb0bd on #121a22 = 7.9:1). */
html[data-eagle-appearance="dark"] {
  --bg: #0d141b !important; --surface: #16212b !important; --surface-soft: #1c2934 !important;
  --ink: #e6edf2 !important; --muted: #9fb0bd !important; --line: #26343f !important;
  --accent: #5cb4ea !important; --accent-strong: #7cc4f0 !important; --accent-soft: #1b3a52 !important;
  --soft-green: #1d4664 !important; --on-accent: #06121c !important; color-scheme: dark;
}
html[data-eagle-appearance="dark"] body { background: var(--bg); color: var(--ink); }
html[data-eagle-appearance="dark"] img.brand-logo, html[data-eagle-appearance="dark"] .avatar img { filter: none; }

/* Fluid glass style. Frosted translucent surfaces over a soft tinted backdrop. Text stays on >=80% opaque
   tints so contrast holds (ink #18252b on rgba(255,255,255,.8) over #cfe3f1 = 13.6:1). */
html[data-eagle-appearance="fluid"] {
  --glass: rgba(255, 255, 255, .62); --glass-strong: rgba(255, 255, 255, .8); --glass-edge: rgba(255, 255, 255, .7);
  --glass-shadow: 0 8px 28px rgba(18, 70, 110, .14), inset 0 1px 0 rgba(255, 255, 255, .85);
  --soft-green: rgba(214, 236, 250, .86) !important; --surface: rgba(255, 255, 255, .8) !important;
}
html[data-eagle-appearance="fluid"] body { background: radial-gradient(120% 80% at 10% 0%, #e3f1fb 0%, transparent 60%), radial-gradient(90% 70% at 100% 100%, #d4e8f6 0%, transparent 55%), #eef5fa; background-attachment: fixed; }
html[data-eagle-appearance="fluid"] .chat-home-nav,
html[data-eagle-appearance="fluid"] #composer,
html[data-eagle-appearance="fluid"] .chat-header,
html[data-eagle-appearance="fluid"] .sidebar-header {
  background: var(--glass) !important; -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6);
  border: 1px solid var(--glass-edge); box-shadow: var(--glass-shadow);
  background-image: linear-gradient(calc(100deg + var(--glass-shift, 0px) * .1), rgba(255,255,255,.35), rgba(255,255,255,0) 45%) !important;
}
html[data-eagle-appearance="fluid"] .chat-home-nav { margin: 0 10px 10px; border-radius: 22px; }
html[data-eagle-appearance="fluid"] #composer { margin: 0 8px 8px; border-radius: 24px; }
html[data-eagle-appearance="fluid"] #messages .bubble { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid var(--glass-edge); box-shadow: 0 3px 12px rgba(18, 70, 110, .08), inset 0 1px 0 rgba(255,255,255,.9); }
html[data-eagle-appearance="fluid"] .chat-home-nav button[aria-current="page"] { transition: transform 360ms var(--eg-spring); }
html[data-eagle-appearance="fluid"] .chat-home-nav button[aria-current="page"]::before { content: ""; position: absolute; inset: 4px 10%; border-radius: 999px; background: rgba(8, 110, 166, .12); z-index: -1; animation: eg-goo 420ms var(--eg-spring); }
html[data-eagle-appearance="fluid"] .chat-home-nav button { position: relative; isolation: isolate; }
@keyframes eg-goo { 0% { transform: scaleX(.4) scaleY(1.3); border-radius: 40%; } 60% { transform: scaleX(1.12) scaleY(.9); } 100% { transform: none; } }
html.eagle-no-backdrop[data-eagle-appearance="fluid"] .chat-home-nav,
html.eagle-no-backdrop[data-eagle-appearance="fluid"] #composer,
html.eagle-no-backdrop[data-eagle-appearance="fluid"] .chat-header,
html.eagle-no-backdrop[data-eagle-appearance="fluid"] #messages .bubble { background: var(--glass-strong) !important; }
html[data-eagle-appearance="fluid"] #messages { overscroll-behavior-y: contain; }
@media (prefers-reduced-motion: reduce) { html[data-eagle-appearance="fluid"] .chat-home-nav button[aria-current="page"]::before { animation: none; } }

/* Physics layers (Fluid only). */
.eagle-ghost { position: fixed !important; margin: 0 !important; z-index: 50; pointer-events: none; will-change: transform, opacity; }
.eagle-droplets { position: fixed; z-index: 51; pointer-events: none; width: 0; height: 0; }
.eagle-droplets span { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #fff, rgba(92, 180, 234, .75)); will-change: transform, opacity; }

/* Dark: main communicator surfaces use explicit tokens so inline theme colours cannot leave light-on-light text. */
html[data-eagle-appearance="dark"] #messages .bubble { background: #1a2631; color: #e6edf2; box-shadow: none; }
html[data-eagle-appearance="dark"] #messages .bubble.mine { background: #1d4664; color: #f1f6fa; }
html[data-eagle-appearance="dark"] #messages .bubble .eg-stamp, html[data-eagle-appearance="dark"] #messages .bubble .meta { color: #a9bac7; }
html[data-eagle-appearance="dark"] #messages .bubble.eg-emoji-only { background: transparent; }
html[data-eagle-appearance="dark"] .chat-row .row-title, html[data-eagle-appearance="dark"] .chat-header { color: #e6edf2; }
html[data-eagle-appearance="dark"] .chat-row .row-subtitle, html[data-eagle-appearance="dark"] .chat-row small { color: #a9bac7; }
html[data-eagle-appearance="dark"] .avatar { background: #1b3a52; color: #cfe6f6; }
html[data-eagle-appearance="dark"] textarea, html[data-eagle-appearance="dark"] input[type="search"], html[data-eagle-appearance="dark"] input[type="text"] { background: #1a2631; color: #e6edf2; border-color: #2b3b48; }
html[data-eagle-appearance="dark"] textarea::placeholder, html[data-eagle-appearance="dark"] input::placeholder { color: #8fa2b1; }
#messages .bubble .body-text { overflow-wrap: break-word; word-break: normal; }


.eg-search-section { margin-top: 6px; border-top: 1px solid var(--line, #dfe7ee); }
.eg-search-heading { margin: 8px 12px 2px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted, #5c6b77); }
.eg-search-hit .avatar { font-size: 16px; }