/* Live Style Studio themes and component treatments. */
:root[data-theme-pack="ocean"]{--primary:#007fa8;--primary-dark:#005f7d;--primary-lighter:#dcf5f8;--background:#eaf6f7;--surface:#f9ffff;--surface-hover:#e2f4f5;--header-bg:#007fa8;--sent-bubble:#007fa8;--link:#007fa8;--chat-bg:#dff2f2}
:root[data-theme-pack="forest"]{--primary:#16775b;--primary-dark:#0e5843;--primary-lighter:#e1f3e9;--background:#eff5ed;--surface:#fbfff9;--surface-hover:#e8f2e4;--header-bg:#176d55;--sent-bubble:#16775b;--link:#16775b;--chat-bg:#e4ecdd}
:root[data-theme-pack="aurora"]{--primary:#6750a4;--primary-dark:#4e3a82;--primary-lighter:#eee8ff;--background:#f3effc;--surface:#fffaff;--header-bg:#6750a4;--sent-bubble:#6750a4;--link:#6750a4;--chat-bg:#e9e5f5}
:root[data-theme-pack="amoled"]{color-scheme:dark;--primary:#00a884;--primary-dark:#007d63;--primary-lighter:#08382f;--background:#000;--surface:#090909;--surface-raised:#111;--surface-hover:#171717;--header-bg:#050505;--text-primary:#f4f4f4;--text-secondary:#aaa;--text-muted:#777;--divider:#242424;--input-bg:#151515;--chat-bg:#000;--sent-bubble:#005f4b;--received-bubble:#151515;--sent-text:#fff;--received-text:#eee;--link:#25d5ac}
:root[data-theme-pack="glass"]{--primary:#567b9d;--primary-dark:#365c7a;--primary-lighter:#e2edf5;--background:#dce8f0;--surface:rgba(255,255,255,.72);--surface-raised:rgba(255,255,255,.82);--surface-hover:rgba(238,247,252,.78);--header-bg:rgba(70,103,132,.83);--sent-bubble:rgba(56,126,176,.88);--received-bubble:rgba(255,255,255,.76);--chat-bg:#d9e6ee;--divider:rgba(70,90,105,.17)}
:root[data-theme-pack="sunset"]{--primary:#d85855;--primary-dark:#ae3e45;--primary-lighter:#fff0e5;--background:#fff4e9;--surface:#fffdf8;--surface-hover:#fae7dc;--header-bg:#d85855;--sent-bubble:#d85855;--link:#c64c50;--chat-bg:#f8e2d3}
:root[data-theme-pack="royal"]{--primary:#5b3f98;--primary-dark:#402875;--primary-lighter:#eee9fa;--background:#f4f1fa;--surface:#fff;--header-bg:#5b3f98;--sent-bubble:#5b3f98;--link:#5b3f98;--warning:#c89420;--chat-bg:#e8e2f1}

:root[data-header-style="gradient"] .app-header{background:linear-gradient(120deg,var(--primary-dark),var(--primary),color-mix(in srgb,var(--primary) 65%,#9b5cff));color:#fff;border:0;box-shadow:0 5px 18px color-mix(in srgb,var(--primary) 24%,transparent)}
:root[data-header-style="gradient"] .app-header.surface-header{color:#fff}
:root[data-header-style="glass"] .app-header{background:color-mix(in srgb,var(--surface) 73%,transparent);color:var(--text-primary);border-bottom:1px solid color-mix(in srgb,var(--divider) 65%,transparent);backdrop-filter:blur(18px) saturate(1.35);-webkit-backdrop-filter:blur(18px) saturate(1.35);box-shadow:0 5px 20px rgba(20,40,55,.09)}

:root[data-nav-style="floating"]{--bottom-nav-height:78px}:root[data-nav-style="floating"] .bottom-nav{right:10px;bottom:9px;left:10px;height:calc(62px + var(--safe-bottom));padding:5px 4px var(--safe-bottom);border:1px solid color-mix(in srgb,var(--divider) 70%,transparent);border-radius:22px;background:color-mix(in srgb,var(--surface) 82%,transparent);box-shadow:0 10px 28px rgba(12,31,45,.2);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
:root[data-nav-style="compact"]{--bottom-nav-height:54px}:root[data-nav-style="compact"] .bottom-nav{height:calc(54px + var(--safe-bottom));padding-top:2px}:root[data-nav-style="compact"] .nav-tab{font-size:8px}:root[data-nav-style="compact"] .nav-tab i{font-size:17px}
:root[data-one-hand="true"]{--bottom-nav-height:78px}:root[data-one-hand="true"] .bottom-nav{height:calc(78px + var(--safe-bottom))}:root[data-one-hand="true"] .nav-tab{min-height:58px}:root[data-one-hand="true"] .fab{bottom:calc(var(--bottom-nav-height) + var(--safe-bottom) + 10px);width:62px;height:62px}

:root[data-icon-style="outline"] .setting-icon i,:root[data-icon-style="outline"] .bottom-nav i,:root[data-icon-style="outline"] .header-actions i{opacity:.78;filter:drop-shadow(0 0 0 currentColor)}
:root[data-icon-style="neon"] .setting-icon i,:root[data-icon-style="neon"] .bottom-nav i,:root[data-icon-style="neon"] .header-actions i,:root[data-icon-style="neon"] .fab i{color:var(--primary-light);filter:drop-shadow(0 0 5px var(--primary)) drop-shadow(0 0 11px color-mix(in srgb,var(--primary) 65%,transparent))}

:root[data-chat-list="cards"] .chat-list{padding:8px;background:transparent}:root[data-chat-list="cards"] .chat-item-shell{margin:8px 4px;overflow:hidden;border:1px solid color-mix(in srgb,var(--divider) 72%,transparent);border-radius:17px;box-shadow:0 5px 15px rgba(15,36,49,.08)}:root[data-chat-list="cards"] .chat-item::after{display:none}
:root[data-density="compact"] .chat-item{height:61px}:root[data-density="compact"] .chat-item .avatar{width:43px;height:43px}:root[data-density="compact"] .chat-preview{font-size:10px}:root[data-density="spacious"] .chat-item{height:90px;padding:0 16px}:root[data-density="spacious"] .chat-item .avatar{width:58px;height:58px}
:root[data-avatar-shape="squircle"] .avatar{border-radius:29%!important}:root[data-avatar-shape="squircle"] .avatar img{border-radius:29%!important}:root[data-avatar-shape="hexagon"] .avatar{border-radius:0!important;clip-path:polygon(25% 6.7%,75% 6.7%,100% 50%,75% 93.3%,25% 93.3%,0 50%)}:root[data-avatar-shape="hexagon"] .avatar img{border-radius:0!important}

:root[data-page-transition="fade"] .page{animation:styleFadeIn .24s ease both}:root[data-page-transition="zoom"] .page{animation:styleZoomIn .3s cubic-bezier(.2,.8,.2,1) both}@keyframes styleFadeIn{from{opacity:0}to{opacity:1}}@keyframes styleZoomIn{from{opacity:0;transform:scale(.965)}to{opacity:1;transform:none}}

.message-bubble{line-height:var(--message-line-height,1.34)}.message-text{font-weight:var(--style-font-weight,500)}
:root[data-bubble-theme="gradient"] .sent .message-bubble{background:linear-gradient(135deg,var(--primary),color-mix(in srgb,var(--primary) 60%,#8e5cff))}:root[data-bubble-theme="gradient"] .received .message-bubble{background:linear-gradient(135deg,var(--surface),color-mix(in srgb,var(--primary-lighter) 52%,var(--surface)))}:root[data-bubble-theme="gradient"] .message-bubble::after{display:none}
:root[data-bubble-theme="glass"] .message-bubble{border:1px solid rgba(255,255,255,.27);backdrop-filter:blur(13px) saturate(1.25);-webkit-backdrop-filter:blur(13px) saturate(1.25);box-shadow:0 5px 18px rgba(14,30,42,.13)}:root[data-bubble-theme="glass"] .sent .message-bubble{background:color-mix(in srgb,var(--primary) 74%,transparent)}:root[data-bubble-theme="glass"] .received .message-bubble{background:color-mix(in srgb,var(--surface) 73%,transparent)}:root[data-bubble-theme="glass"] .message-bubble::after{display:none}
:root[data-bubble-theme="transparent"] .message-bubble{border:1px solid color-mix(in srgb,var(--primary) 28%,var(--divider));background:color-mix(in srgb,var(--surface) 48%,transparent)!important;box-shadow:none;backdrop-filter:blur(7px)}:root[data-bubble-theme="transparent"] .message-bubble::after{display:none}
:root[data-message-spacing="compact"] .message-row{margin-top:0;margin-bottom:0}:root[data-message-spacing="airy"] .message-row{margin-top:7px;margin-bottom:7px}
:root[data-font-pack="rounded"]{--font-family:"Arial Rounded MT Bold","Trebuchet MS",system-ui,sans-serif}:root[data-font-pack="serif"]{--font-family:Georgia,"Times New Roman",serif}:root[data-font-pack="mono"]{--font-family:"SFMono-Regular",Consolas,"Liberation Mono",monospace}
:root[data-tick-style="blue"] .delivery.read{color:#33b8ff!important;filter:drop-shadow(0 0 2px rgba(51,184,255,.35))}:root[data-tick-style="dots"] .delivery{font-size:0}:root[data-tick-style="dots"] .delivery::after{content:"••";font-size:13px;letter-spacing:-2px;color:var(--primary-light);text-shadow:0 0 5px var(--primary)}
:root[data-send-animation="pop"] .message-row.sent{animation:messagePop .25s cubic-bezier(.2,1.4,.4,1)}:root[data-send-animation="slide"] .message-row.sent{animation:messageSlide .3s ease-out}:root[data-send-animation="none"] .message-row.sent{animation:none}@keyframes messagePop{from{opacity:0;transform:scale(.86) translateY(8px)}to{opacity:1;transform:none}}@keyframes messageSlide{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
:root[data-typing-style="wave"] .typing-bubble i{border-radius:2px;animation:typingWave .75s ease-in-out infinite}:root[data-typing-style="pulse"] .typing-bubble{animation:typingPulse 1.1s ease-in-out infinite}:root[data-typing-style="pulse"] .typing-bubble i{animation:none}@keyframes typingWave{0%,100%{height:5px}50%{height:17px}}@keyframes typingPulse{50%{transform:scale(1.08);filter:brightness(1.08)}}

:root[data-high-contrast="true"]{--text-primary:#000;--text-secondary:#252525;--divider:#555}:root[data-high-contrast="true"][data-theme="dark"],:root[data-high-contrast="true"][data-theme-pack="amoled"]{--text-primary:#fff;--text-secondary:#e5e5e5;--divider:#aaa}:root[data-high-contrast="true"] button:focus-visible{outline-width:4px}
:root[data-eye-comfort="true"] .app-shell::after{content:"";position:absolute;z-index:9999;inset:0;pointer-events:none;background:rgba(255,168,72,.075);mix-blend-mode:multiply}

.style-studio-scroll{padding-bottom:28px}.style-live-preview{margin:14px;overflow:hidden;border:1px solid var(--divider);border-radius:20px;background:var(--chat-bg);box-shadow:var(--shadow-md)}.style-preview-header{height:49px;display:flex;align-items:center;gap:8px;padding:0 12px;color:#fff;background:var(--header-bg)}.style-preview-header strong{flex:1;font-size:11px}.style-preview-body{min-height:180px;padding:16px;background-image:var(--chat-wallpaper,none);background-size:cover}.style-preview-body .message-row{pointer-events:none}.style-preview-nav{height:48px;display:flex;align-items:center;justify-content:space-around;background:var(--surface)}.style-preview-nav i{color:var(--text-muted)}.style-preview-nav i.active{color:var(--primary)}
.theme-pack-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;padding:8px 14px 18px}.theme-pack-card{position:relative;min-height:92px;padding:10px;border:2px solid transparent;border-radius:16px;background:var(--surface);box-shadow:var(--shadow-sm);text-align:left}.theme-pack-card>span{display:block;height:43px;border-radius:10px;background:linear-gradient(125deg,var(--theme-a),var(--theme-b))}.theme-pack-card strong{display:block;margin-top:7px;font-size:10px}.theme-pack-card small{color:var(--primary);font-size:8px;font-weight:800}.theme-pack-card>i{position:absolute;top:16px;right:16px;color:#fff}.theme-pack-card.active{border-color:var(--primary)}.theme-pack-card.locked>span{filter:brightness(.62)}
.style-section{margin:0 12px 16px;padding:12px;border:1px solid var(--divider);border-radius:18px;background:var(--surface);box-shadow:var(--shadow-sm)}.style-section h3{margin:5px 2px 9px;font-size:11px}.style-section h3:not(:first-child){margin-top:18px}.style-choice-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.style-choice{position:relative;min-height:56px;display:flex;align-items:center;gap:8px;padding:9px;border:1px solid var(--divider);border-radius:13px;background:var(--input-bg);text-align:left}.style-choice>i{width:28px;height:28px;display:grid;place-items:center;border-radius:9px;color:var(--primary);background:var(--surface)}.style-choice span{min-width:0;flex:1}.style-choice strong,.style-choice small{display:block}.style-choice strong{font-size:9px}.style-choice small{color:var(--text-secondary);font-size:7.5px}.style-choice>b{position:absolute;top:4px;right:5px;color:#b88700;font-size:6px}.style-choice>em{position:absolute;right:7px;bottom:7px;color:var(--text-muted);font-size:8px}.style-choice.active{border-color:var(--primary);box-shadow:0 0 0 1px var(--primary)}.style-choice.locked{opacity:.7}.style-accent-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;padding:12px 3px}.style-accent{position:relative;aspect-ratio:1;border:3px solid var(--surface);border-radius:50%;background:var(--accent);box-shadow:0 0 0 1px var(--divider)}.style-accent.active{box-shadow:0 0 0 3px var(--primary)}.style-accent i{position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:9px;text-shadow:0 1px 3px #000}.style-range{display:grid;gap:7px;margin:14px 2px}.style-range span{display:flex;justify-content:space-between;font-size:10px}.style-range input{width:100%;accent-color:var(--primary)}
@media(max-width:350px){.style-choice-grid{grid-template-columns:1fr}.theme-pack-grid{grid-template-columns:1fr 1fr}}
