/* Eagle elemental themes: Water, Air, Space, Earth, Fire. Tokens are set inline by eagle-elements.js
   (html[data-eagle-tone] exists only while an element theme is active). Translucency stays mild.
   Motion: Lively = full, Calm = shorter/softer, Off and reduced motion = no transforms. */
html[data-eagle-tone="light"] { color-scheme: light; }
html[data-eagle-tone="dark"] { color-scheme: dark; }
html[data-eagle-tone] body { background: var(--el-backdrop); background-attachment: fixed; color: var(--ink); }
/* Live background canvas sits behind every panel; static tier keeps a drawn frame or the CSS backdrop. */
.eagle-element-bg { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: -1; pointer-events: none; display: none; }
html[data-eagle-tone] .eagle-element-bg { display: block; }
/* Surfaces: bars, composer, sheets, menus, dialogs, More cards. */
html[data-eagle-tone] .chat-home-nav, html[data-eagle-tone] #composer, html[data-eagle-tone] .chat-header, html[data-eagle-tone] .sidebar-header,
html[data-eagle-tone] .inspector, html[data-eagle-tone] .chat-tools-menu, html[data-eagle-tone] [role="dialog"], html[data-eagle-tone] dialog[open],
html[data-eagle-tone] .chat-home-more-section {
  background: var(--el-glass) !important; color: var(--ink); -webkit-backdrop-filter: var(--el-blur); backdrop-filter: var(--el-blur);
  border: 1px solid var(--el-edge); box-shadow: var(--el-hi), var(--el-shadow); }
html[data-eagle-tone] .chat-home-nav { margin: 0 10px 10px; border-radius: var(--el-radius); }
html[data-eagle-tone] #composer { margin: 0 8px 8px; border-radius: var(--el-radius); }
html[data-eagle-tone] .chat-tools-menu, html[data-eagle-tone] [role="dialog"], html[data-eagle-tone] dialog[open], html[data-eagle-tone] .chat-home-more-section { border-radius: var(--el-radius); }
html[data-eagle-tone] .chat-home-nav button { position: relative; isolation: isolate; }
html[data-eagle-tone] .chat-home-nav button[aria-current="page"]::before { content: ""; position: absolute; inset: 4px 10%; border-radius: 999px; background: var(--accent-soft); z-index: -1; }
/* Earth is matte: blur only on overlays (menus, dialogs, sheets). */
html[data-eagle-appearance="earth"][data-eagle-tone] .chat-home-nav, html[data-eagle-appearance="earth"][data-eagle-tone] #composer,
html[data-eagle-appearance="earth"][data-eagle-tone] .chat-header, html[data-eagle-appearance="earth"][data-eagle-tone] .sidebar-header,
html[data-eagle-appearance="earth"][data-eagle-tone] .chat-home-more-section { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--surface) !important; }
/* Space: gradient rim accent → accent.alt at 30%. */
html[data-eagle-appearance="space"][data-eagle-tone] .chat-tools-menu, html[data-eagle-appearance="space"][data-eagle-tone] dialog[open] {
  border-color: transparent; background: linear-gradient(var(--el-glass-solid), var(--el-glass-solid)) padding-box, linear-gradient(135deg, color-mix(in srgb, var(--el-accent) 30%, transparent), color-mix(in srgb, var(--el-alt) 30%, transparent)) border-box !important; }
/* Bubbles */
html[data-eagle-tone] #messages .bubble { background: var(--el-in); color: var(--ink); border: 1px solid var(--el-edge); border-radius: var(--el-radius);
  -webkit-backdrop-filter: var(--el-blur); backdrop-filter: var(--el-blur); box-shadow: var(--el-hi), 0 4px 14px -10px rgba(0,0,0,.3); transform-origin: 15% 100%; }
html[data-eagle-tone] #messages .bubble.mine { background: var(--el-out); color: var(--el-out-ink); border-color: rgba(255,255,255,.16); transform-origin: 85% 100%; }
html[data-eagle-tone] #messages .bubble.mine .eg-stamp, html[data-eagle-tone] #messages .bubble.mine .meta, html[data-eagle-tone] #messages .bubble.mine .receipt { color: rgba(255,255,255,.88); }
html[data-eagle-tone] #messages .bubble.mine a { color: #FFFFFF; text-decoration: underline; }
html[data-eagle-tone] #messages .bubble.eg-emoji-only { background: transparent; border-color: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
html[data-eagle-tone] #messages .bubble .meta-sender { color: var(--accent-strong); }
html[data-eagle-tone] .chat-row.active { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent-strong); }
html[data-eagle-tone] .chat-row .row-title { color: var(--ink); }
html[data-eagle-tone] .chat-row .row-subtitle, html[data-eagle-tone] .chat-row small { color: var(--muted); }
html[data-eagle-tone] .chat-row.is-unread .row-meta small { color: var(--accent-strong); }
html[data-eagle-tone] .chat-row .badge { background: var(--accent); color: #fff; box-shadow: 0 3px 10px -4px var(--el-accent); }
html[data-eagle-tone] .chat-row .avatar, html[data-eagle-tone] .chat-header .avatar { background: linear-gradient(140deg, var(--el-alt), var(--accent)) !important; box-shadow: 0 0 0 2px var(--el-edge); }
html[data-eagle-tone] .icon-button, html[data-eagle-tone] .chat-tools-menu ion-icon, html[data-eagle-tone] .chat-tools-menu svg,
html[data-eagle-tone] .chat-home-more-action > ion-icon:first-child { color: var(--el-icon); }
html[data-eagle-tone="dark"] textarea, html[data-eagle-tone="dark"] input[type="search"], html[data-eagle-tone="dark"] input[type="text"], html[data-eagle-tone="dark"] select {
  background: rgba(255,255,255,.06); color: var(--ink); border-color: rgba(255,255,255,.14); }
html[data-eagle-tone] textarea::placeholder, html[data-eagle-tone] input::placeholder { color: var(--muted); }
html[data-eagle-tone] textarea:focus-visible, html[data-eagle-tone] input:focus-visible { outline: 2px solid color-mix(in srgb, var(--el-accent) 70%, transparent); outline-offset: 1px; }
html[data-eagle-tone="dark"] .appearance-motion-option { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); }
html[data-eagle-tone] .appearance-motion-option small, html[data-eagle-tone] .appearance-motion-note { color: var(--muted); }
html[data-eagle-tone="dark"] .fw-public, html[data-eagle-tone="dark"] .fw-moment-cta { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14); }
html[data-eagle-tone="dark"] .fw-public-link input { background: rgba(0,0,0,.35); color: inherit; }
html[data-eagle-tone="dark"] .fw-public small, html[data-eagle-tone="dark"] .fw-moment-cta small { color: var(--muted); }
html.eagle-no-backdrop[data-eagle-tone] .chat-tools-menu, html.eagle-no-backdrop[data-eagle-tone] dialog[open], html.eagle-no-backdrop[data-eagle-tone] #messages .bubble:not(.mine) { background: var(--el-glass-solid) !important; }

/* Motion: bubble flight, arrivals, presses, screen push/pop, tabs, toasts and sheets are driven by
 * eagle-springs.js (transform + opacity only, Calm = critically damped, Off / reduced motion = instant). */
html[data-eagle-tone] .el-depth { box-shadow: -18px 0 40px -18px rgba(0,0,0,.28); }
html[data-eagle-tone][data-eagle-tone="dark"] .el-depth { box-shadow: -18px 0 44px -16px rgba(0,0,0,.6); }
html[data-eagle-tone] .el-dragging { cursor: grabbing; user-select: none; }
/* Picker preview tiles */
.appearance-style-option[data-style="water"] .appearance-style-preview { background: linear-gradient(140deg, #BFEFFF, #3CC4D8 55%, #0A7EA4); }
.appearance-style-option[data-style="air"] .appearance-style-preview { background: linear-gradient(140deg, #FFFFFF, #9ED8C9 50%, #8AB4FF); }
.appearance-style-option[data-style="space"] .appearance-style-preview { background: radial-gradient(circle at 30% 30%, #E07BE8 0 8%, transparent 30%), linear-gradient(140deg, #4B35B0, #05040F); }
.appearance-style-option[data-style="earth"] .appearance-style-preview { background: linear-gradient(160deg, #C49A6C, #8FB06F 55%, #7A5C3A); }
.appearance-style-option[data-style="fire"] .appearance-style-preview { background: linear-gradient(160deg, #FFC046, #FF6A2B 55%, #B3210B); }
/* Complementary accent (light and dark): a quiet second-colour wash, never on text. */
html[data-eagle-tone] #messages .bubble.mine { box-shadow: var(--el-shadow), inset 0 -2px 0 var(--el-alt-soft); }
html[data-eagle-tone] #composer, html[data-eagle-tone] .composer { box-shadow: inset 0 1px 0 var(--el-alt-soft); }
html[data-eagle-tone] :focus-visible { outline-color: var(--el-alt); }

/* 1.2.4: let the live element background show through the app frame (the panels above keep their glass). */
html[data-eagle-tone] .shell, html[data-eagle-tone] .shell > .detail, html[data-eagle-tone] .conversation-scroll-stage, html[data-eagle-tone] #messages { background: transparent !important; }