/* Yourni UI — component styles + theme tokens, scoped to .yflow */

.yflow{
  
  --c-moodPositive: #96A870;
  --c-moodNeutral: #DEB870;
  --c-moodChallenging: #C5A9B8;
  --c-success: #96A870;
  --c-warning: #DEB870;
  --c-destructive: #C5A9B8;
  --c-destructiveBold: #7A6972;
  --c-severityMinimal: #34C759;
  --c-severityMild: #FFCC00;
  --c-severityModerate: #FF9500;
  --c-severitySevere: #FF3B30;
  --c-systemRed: #FF3B30;

  
  --space-xxs: 2px;
  --space-xs: 4px;
  --space-s: 6px;
  --space-sm: 8px;
  --space-m: 10px;
  --space-md: 12px;
  --space-ml: 14px;
  --space-lg: 16px;
  --space-xl: 20px;
  --space-xxl: 24px;
  --space-xxxl: 32px;
  --space-xxxxl: 40px;

  
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-full: 9999px;

  
  --opacity-faint: 0.15;
  --opacity-soft: 0.3;
  --opacity-medium: 0.5;
  --opacity-strong: 0.7;
  --opacity-heavy: 0.85;

  
  --font-ui: 'Inter', 'Inter Soft', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --type-monoDisplayLarge: 400 40px/1.21 var(--font-ui);
  --type-monoLargeTitle: 700 34px/1.21 var(--font-ui);
  --type-monoDisplay: 400 32px/1.21 var(--font-ui);
  --type-monoTitle: 600 28px/1.21 var(--font-ui);
  --type-monoTitle2: 600 22px/1.21 var(--font-ui);
  --type-monoTitle3: 600 20px/1.21 var(--font-ui);
  --type-monoBody: 400 17px/1.21 var(--font-ui);
  --type-monoButton: 500 17px/1.21 var(--font-ui);
  --type-monoSubheadline: 400 15px/1.21 var(--font-ui);
  --type-monoSubheadlineMedium: 500 15px/1.21 var(--font-ui);
  --type-monoSubheadlineSemibold: 600 15px/1.21 var(--font-ui);
  --type-monoCaption: 400 12px/1.21 var(--font-ui);
  --type-sectionLabel: 600 11px/1.21 var(--font-mono);

  
  --type-monoLargeTitleItalic: italic 700 34px/1.21 var(--font-ui);
  --type-monoTitleItalic: italic 600 28px/1.21 var(--font-ui);
  --type-monoTitle2Italic: italic 600 22px/1.21 var(--font-ui);
  --type-monoTitle3Italic: italic 600 20px/1.21 var(--font-ui);
  --type-monoBodyItalic: italic 400 17px/1.21 var(--font-ui);
  --type-monoButtonItalic: italic 500 17px/1.21 var(--font-ui);
  --type-monoSubheadlineItalic: italic 400 15px/1.21 var(--font-ui);
  --type-monoCaptionItalic: italic 400 12px/1.21 var(--font-ui);
}
.yflow [data-theme="neutral"][data-mode="light"]{
  --c-primaryBackground: #F8F7F5;
  --c-secondaryBackground: #E0DDD8;
  --c-tertiaryBackground: #E9E8E6;
  --c-translucentSurface: rgba(248, 247, 245, 0.7200);
  --c-primaryAccent: #78706A;
  --c-primaryAccentLight: #948C86;
  --c-primaryAccentDark: #5A5450;
  --c-primaryAccentContrastText: #FFFFFF;
  --c-secondaryAccent: #8A8278;
  --c-secondaryAccentLight: rgba(138, 130, 120, 0.6000);
  --c-secondaryAccentDark: #6E6860;
  --c-secondaryAccentContrastText: #FFFFFF;
  --c-primaryText: #4A4642;
  --c-secondaryText: #6A6460;
  --c-tertiaryText: rgba(106, 100, 96, 0.6500);
  --c-faintText: rgba(106, 100, 96, 0.4500);
  --c-disabledColor: #C4C0BB;
  --c-dividerColor: #D8D4CE;
}
.yflow [data-theme="neutral"][data-mode="dark"]{
  --c-primaryBackground: #141414;
  --c-secondaryBackground: #202020;
  --c-tertiaryBackground: #131313;
  --c-translucentSurface: rgba(20, 20, 20, 0.7200);
  --c-primaryAccent: #9A9088;
  --c-primaryAccentLight: #B0A8A0;
  --c-primaryAccentDark: #7A7068;
  --c-primaryAccentContrastText: #FFFFFF;
  --c-secondaryAccent: #7A7268;
  --c-secondaryAccentLight: rgba(122, 114, 104, 0.6000);
  --c-secondaryAccentDark: #625B53;
  --c-secondaryAccentContrastText: #FFFFFF;
  --c-primaryText: #EAE8F2;
  --c-secondaryText: rgba(234, 232, 242, 0.6500);
  --c-tertiaryText: rgba(234, 232, 242, 0.4225);
  --c-faintText: rgba(234, 232, 242, 0.2925);
  --c-disabledColor: rgba(234, 232, 242, 0.3000);
  --c-dividerColor: rgba(234, 232, 242, 0.1200);
}
.yflow [data-theme="brand"][data-mode="light"]{
  --c-primaryBackground: #F8F7F5;
  --c-secondaryBackground: #E0DDD8;
  --c-tertiaryBackground: #E9E8E6;
  --c-translucentSurface: rgba(248, 247, 245, 0.7200);
  --c-primaryAccent: #586E4E;
  --c-primaryAccentLight: #7A9270;
  --c-primaryAccentDark: #3F5439;
  --c-primaryAccentContrastText: #FFFFFF;
  --c-secondaryAccent: #A9BF9E;
  --c-secondaryAccentLight: rgba(169, 191, 158, 0.6000);
  --c-secondaryAccentDark: #87997E;
  --c-secondaryAccentContrastText: #FFFFFF;
  --c-primaryText: #4A4642;
  --c-secondaryText: #6A6460;
  --c-tertiaryText: rgba(106, 100, 96, 0.6500);
  --c-faintText: rgba(106, 100, 96, 0.4500);
  --c-disabledColor: #C4C0BB;
  --c-dividerColor: #D8D4CE;
}
.yflow [data-theme="brand"][data-mode="dark"]{
  --c-primaryBackground: #141414;
  --c-secondaryBackground: #202020;
  --c-tertiaryBackground: #131313;
  --c-translucentSurface: rgba(20, 20, 20, 0.7200);
  --c-primaryAccent: #B8D2A0;
  --c-primaryAccentLight: #CFE2BE;
  --c-primaryAccentDark: #6E8A5E;
  --c-primaryAccentContrastText: #2D2D2D;
  --c-secondaryAccent: #8DAE7C;
  --c-secondaryAccentLight: rgba(141, 174, 124, 0.6000);
  --c-secondaryAccentDark: #718B63;
  --c-secondaryAccentContrastText: #FFFFFF;
  --c-primaryText: #EAE8F2;
  --c-secondaryText: rgba(234, 232, 242, 0.6500);
  --c-tertiaryText: rgba(234, 232, 242, 0.4225);
  --c-faintText: rgba(234, 232, 242, 0.2925);
  --c-disabledColor: rgba(234, 232, 242, 0.3000);
  --c-dividerColor: rgba(234, 232, 242, 0.1200);
}
.yflow [data-theme="euphoric"][data-mode="light"]{
  --c-primaryBackground: #F7FAF0;
  --c-secondaryBackground: #BFCE70;
  --c-tertiaryBackground: #E8EBE2;
  --c-translucentSurface: rgba(247, 250, 240, 0.7200);
  --c-primaryAccent: #4A6E18;
  --c-primaryAccentLight: #6A9A2A;
  --c-primaryAccentDark: #324E10;
  --c-primaryAccentContrastText: #FFFFFF;
  --c-secondaryAccent: #6878A8;
  --c-secondaryAccentLight: rgba(104, 120, 168, 0.6000);
  --c-secondaryAccentDark: #536086;
  --c-secondaryAccentContrastText: #FFFFFF;
  --c-primaryText: #4A4642;
  --c-secondaryText: #6A6460;
  --c-tertiaryText: rgba(106, 100, 96, 0.6500);
  --c-faintText: rgba(106, 100, 96, 0.4500);
  --c-disabledColor: #C4C0BB;
  --c-dividerColor: #D8D4CE;
}
.yflow [data-theme="euphoric"][data-mode="dark"]{
  --c-primaryBackground: #111808;
  --c-secondaryBackground: #1C2C0C;
  --c-tertiaryBackground: #101708;
  --c-translucentSurface: rgba(17, 24, 8, 0.7200);
  --c-primaryAccent: #88C030;
  --c-primaryAccentLight: #A0DC48;
  --c-primaryAccentDark: #609820;
  --c-primaryAccentContrastText: #FFFFFF;
  --c-secondaryAccent: #5060A0;
  --c-secondaryAccentLight: rgba(80, 96, 160, 0.6000);
  --c-secondaryAccentDark: #404D80;
  --c-secondaryAccentContrastText: #FFFFFF;
  --c-primaryText: #EAE8F2;
  --c-secondaryText: rgba(234, 232, 242, 0.6500);
  --c-tertiaryText: rgba(234, 232, 242, 0.4225);
  --c-faintText: rgba(234, 232, 242, 0.2925);
  --c-disabledColor: rgba(234, 232, 242, 0.3000);
  --c-dividerColor: rgba(234, 232, 242, 0.1200);
}
.yflow [data-theme="tense"][data-mode="light"]{
  --c-primaryBackground: #FBF3EE;
  --c-secondaryBackground: #E8A878;
  --c-tertiaryBackground: #ECE4E0;
  --c-translucentSurface: rgba(251, 243, 238, 0.7200);
  --c-primaryAccent: #A84020;
  --c-primaryAccentLight: #C86040;
  --c-primaryAccentDark: #782808;
  --c-primaryAccentContrastText: #FFFFFF;
  --c-secondaryAccent: #C09060;
  --c-secondaryAccentLight: rgba(192, 144, 96, 0.6000);
  --c-secondaryAccentDark: #9A734D;
  --c-secondaryAccentContrastText: #FFFFFF;
  --c-primaryText: #4A4642;
  --c-secondaryText: #6A6460;
  --c-tertiaryText: rgba(106, 100, 96, 0.6500);
  --c-faintText: rgba(106, 100, 96, 0.4500);
  --c-disabledColor: #C4C0BB;
  --c-dividerColor: #D8D4CE;
}
.yflow [data-theme="tense"][data-mode="dark"]{
  --c-primaryBackground: #1A0C08;
  --c-secondaryBackground: #2A1410;
  --c-tertiaryBackground: #180B08;
  --c-translucentSurface: rgba(26, 12, 8, 0.7200);
  --c-primaryAccent: #D06030;
  --c-primaryAccentLight: #E88050;
  --c-primaryAccentDark: #A04020;
  --c-primaryAccentContrastText: #FFFFFF;
  --c-secondaryAccent: #906030;
  --c-secondaryAccentLight: rgba(144, 96, 48, 0.6000);
  --c-secondaryAccentDark: #734D26;
  --c-secondaryAccentContrastText: #FFFFFF;
  --c-primaryText: #EAE8F2;
  --c-secondaryText: rgba(234, 232, 242, 0.6500);
  --c-tertiaryText: rgba(234, 232, 242, 0.4225);
  --c-faintText: rgba(234, 232, 242, 0.2925);
  --c-disabledColor: rgba(234, 232, 242, 0.3000);
  --c-dividerColor: rgba(234, 232, 242, 0.1200);
}
.yflow [data-theme="calm"][data-mode="light"]{
  --c-primaryBackground: #F3F8F7;
  --c-secondaryBackground: #8DC4BE;
  --c-tertiaryBackground: #E4E9E8;
  --c-translucentSurface: rgba(243, 248, 247, 0.7200);
  --c-primaryAccent: #186860;
  --c-primaryAccentLight: #2A8880;
  --c-primaryAccentDark: #0E4840;
  --c-primaryAccentContrastText: #FFFFFF;
  --c-secondaryAccent: #C08888;
  --c-secondaryAccentLight: rgba(192, 136, 136, 0.6000);
  --c-secondaryAccentDark: #9A6D6D;
  --c-secondaryAccentContrastText: #FFFFFF;
  --c-primaryText: #4A4642;
  --c-secondaryText: #6A6460;
  --c-tertiaryText: rgba(106, 100, 96, 0.6500);
  --c-faintText: rgba(106, 100, 96, 0.4500);
  --c-disabledColor: #C4C0BB;
  --c-dividerColor: #D8D4CE;
}
.yflow [data-theme="calm"][data-mode="dark"]{
  --c-primaryBackground: #080E0D;
  --c-secondaryBackground: #0E1C1A;
  --c-tertiaryBackground: #080D0C;
  --c-translucentSurface: rgba(8, 14, 13, 0.7200);
  --c-primaryAccent: #2CA09A;
  --c-primaryAccentLight: #44B8B0;
  --c-primaryAccentDark: #1A7870;
  --c-primaryAccentContrastText: #FFFFFF;
  --c-secondaryAccent: #885050;
  --c-secondaryAccentLight: rgba(136, 80, 80, 0.6000);
  --c-secondaryAccentDark: #6D4040;
  --c-secondaryAccentContrastText: #FFFFFF;
  --c-primaryText: #EAE8F2;
  --c-secondaryText: rgba(234, 232, 242, 0.6500);
  --c-tertiaryText: rgba(234, 232, 242, 0.4225);
  --c-faintText: rgba(234, 232, 242, 0.2925);
  --c-disabledColor: rgba(234, 232, 242, 0.3000);
  --c-dividerColor: rgba(234, 232, 242, 0.1200);
}
.yflow [data-theme="lethargic"][data-mode="light"]{
  --c-primaryBackground: #EEF2FA;
  --c-secondaryBackground: #A8BCD8;
  --c-tertiaryBackground: #E0E3EB;
  --c-translucentSurface: rgba(238, 242, 250, 0.7200);
  --c-primaryAccent: #3A5A88;
  --c-primaryAccentLight: #5A7AAA;
  --c-primaryAccentDark: #223A68;
  --c-primaryAccentContrastText: #FFFFFF;
  --c-secondaryAccent: #8888B8;
  --c-secondaryAccentLight: rgba(136, 136, 184, 0.6000);
  --c-secondaryAccentDark: #6D6D93;
  --c-secondaryAccentContrastText: #FFFFFF;
  --c-primaryText: #4A4642;
  --c-secondaryText: #6A6460;
  --c-tertiaryText: rgba(106, 100, 96, 0.6500);
  --c-faintText: rgba(106, 100, 96, 0.4500);
  --c-disabledColor: #C4C0BB;
  --c-dividerColor: #D8D4CE;
}
.yflow [data-theme="lethargic"][data-mode="dark"]{
  --c-primaryBackground: #0A0E18;
  --c-secondaryBackground: #101828;
  --c-tertiaryBackground: #090D17;
  --c-translucentSurface: rgba(10, 14, 24, 0.7200);
  --c-primaryAccent: #5880B8;
  --c-primaryAccentLight: #78A0D8;
  --c-primaryAccentDark: #386098;
  --c-primaryAccentContrastText: #FFFFFF;
  --c-secondaryAccent: #6060A0;
  --c-secondaryAccentLight: rgba(96, 96, 160, 0.6000);
  --c-secondaryAccentDark: #4D4D80;
  --c-secondaryAccentContrastText: #FFFFFF;
  --c-primaryText: #EAE8F2;
  --c-secondaryText: rgba(234, 232, 242, 0.6500);
  --c-tertiaryText: rgba(234, 232, 242, 0.4225);
  --c-faintText: rgba(234, 232, 242, 0.2925);
  --c-disabledColor: rgba(234, 232, 242, 0.3000);
  --c-dividerColor: rgba(234, 232, 242, 0.1200);
}
.yflow [data-theme="pleased"][data-mode="light"]{
  --c-primaryBackground: #FAF7EE;
  --c-secondaryBackground: #D8C088;
  --c-tertiaryBackground: #EBE8E0;
  --c-translucentSurface: rgba(250, 247, 238, 0.7200);
  --c-primaryAccent: #4E7038;
  --c-primaryAccentLight: #6A9450;
  --c-primaryAccentDark: #365228;
  --c-primaryAccentContrastText: #FFFFFF;
  --c-secondaryAccent: #8068A0;
  --c-secondaryAccentLight: rgba(128, 104, 160, 0.6000);
  --c-secondaryAccentDark: #665380;
  --c-secondaryAccentContrastText: #FFFFFF;
  --c-primaryText: #4A4642;
  --c-secondaryText: #6A6460;
  --c-tertiaryText: rgba(106, 100, 96, 0.6500);
  --c-faintText: rgba(106, 100, 96, 0.4500);
  --c-disabledColor: #C4C0BB;
  --c-dividerColor: #D8D4CE;
}
.yflow [data-theme="pleased"][data-mode="dark"]{
  --c-primaryBackground: #14100A;
  --c-secondaryBackground: #20180E;
  --c-tertiaryBackground: #130F09;
  --c-translucentSurface: rgba(20, 16, 10, 0.7200);
  --c-primaryAccent: #78A840;
  --c-primaryAccentLight: #90C058;
  --c-primaryAccentDark: #5A8030;
  --c-primaryAccentContrastText: #FFFFFF;
  --c-secondaryAccent: #685080;
  --c-secondaryAccentLight: rgba(104, 80, 128, 0.6000);
  --c-secondaryAccentDark: #534066;
  --c-secondaryAccentContrastText: #FFFFFF;
  --c-primaryText: #EAE8F2;
  --c-secondaryText: rgba(234, 232, 242, 0.6500);
  --c-tertiaryText: rgba(234, 232, 242, 0.4225);
  --c-faintText: rgba(234, 232, 242, 0.2925);
  --c-disabledColor: rgba(234, 232, 242, 0.3000);
  --c-dividerColor: rgba(234, 232, 242, 0.1200);
}
.yflow [data-theme="miserable"][data-mode="light"]{
  --c-primaryBackground: #F2F0F8;
  --c-secondaryBackground: #B8A8D8;
  --c-tertiaryBackground: #E3E2E9;
  --c-translucentSurface: rgba(242, 240, 248, 0.7200);
  --c-primaryAccent: #4A3080;
  --c-primaryAccentLight: #6A50A0;
  --c-primaryAccentDark: #2A1860;
  --c-primaryAccentContrastText: #FFFFFF;
  --c-secondaryAccent: #7080A8;
  --c-secondaryAccentLight: rgba(112, 128, 168, 0.6000);
  --c-secondaryAccentDark: #5A6686;
  --c-secondaryAccentContrastText: #FFFFFF;
  --c-primaryText: #4A4642;
  --c-secondaryText: #6A6460;
  --c-tertiaryText: rgba(106, 100, 96, 0.6500);
  --c-faintText: rgba(106, 100, 96, 0.4500);
  --c-disabledColor: #C4C0BB;
  --c-dividerColor: #D8D4CE;
}
.yflow [data-theme="miserable"][data-mode="dark"]{
  --c-primaryBackground: #0C0818;
  --c-secondaryBackground: #140E28;
  --c-tertiaryBackground: #0B0817;
  --c-translucentSurface: rgba(12, 8, 24, 0.7200);
  --c-primaryAccent: #6850A8;
  --c-primaryAccentLight: #8870C8;
  --c-primaryAccentDark: #4A3888;
  --c-primaryAccentContrastText: #FFFFFF;
  --c-secondaryAccent: #505888;
  --c-secondaryAccentLight: rgba(80, 88, 136, 0.6000);
  --c-secondaryAccentDark: #40466D;
  --c-secondaryAccentContrastText: #FFFFFF;
  --c-primaryText: #EAE8F2;
  --c-secondaryText: rgba(234, 232, 242, 0.6500);
  --c-tertiaryText: rgba(234, 232, 242, 0.4225);
  --c-faintText: rgba(234, 232, 242, 0.2925);
  --c-disabledColor: rgba(234, 232, 242, 0.3000);
  --c-dividerColor: rgba(234, 232, 242, 0.1200);
}

/* ── icon ── */
.yflow y-icon{
  display: inline-block;
  width: var(--icon-size, 1em);
  height: var(--icon-size, 1em);
  flex: none;
  line-height: 0;
}
.yflow y-icon svg{ width: 100%; height: 100%; display: block; }
.yflow y-icon[data-missing]{
  border: 1px dashed currentColor;
  border-radius: 2px;
  opacity: .5;
}

/* ── button ── */
.yflow y-button{
  display: inline-flex;
  align-items: center;
  gap: var(--space-s);                 
  padding: 10px var(--space-xl);       
  border-radius: var(--radius-full);
  font: var(--type-monoBody);
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: filter .15s ease;
}
.yflow y-button:hover{ filter: brightness(1.06); }
.yflow y-button:focus-visible{ outline: 2px solid var(--c-primaryText); outline-offset: 2px; }
.yflow y-button y-icon{ --icon-size: .85em; }
.yflow y-button[variant="primary"]{
  background: var(--c-primaryAccent);
  color: var(--c-primaryAccentContrastText);
}
.yflow y-button[variant="secondary"]{
  background: color-mix(in srgb, var(--c-secondaryBackground) 50%, transparent);
  color: var(--c-secondaryText);
}
.yflow y-button[variant="destructive"]{
  background: color-mix(in srgb, var(--c-secondaryBackground) 50%, transparent);
  color: var(--c-systemRed);                        
  box-shadow: inset 0 0 0 1.5px var(--c-systemRed);
}
.yflow y-button[variant="icon"]{
  background: none;
  color: var(--c-secondaryText);
  padding: var(--space-sm);            
}
.yflow y-button[variant="icon"] y-icon{ --icon-size: 22px; }
.yflow y-button[size="compact"]{ font: var(--type-monoCaption); padding: 7px var(--space-ml); }
.yflow y-button[size="compact"][variant="icon"]{ padding: var(--space-s); }
.yflow y-button[size="compact"][variant="icon"] y-icon{ --icon-size: 18px; }
.yflow y-button[size="small"]{ font: var(--type-monoCaption); padding: 5px var(--space-m); }
.yflow y-button[size="small"][variant="icon"]{ padding: 3px; }
.yflow y-button[size="small"][variant="icon"] y-icon{ --icon-size: 13px; }
.yflow y-button[aria-disabled="true"]{ cursor: not-allowed; filter: none; }
.yflow y-button[aria-disabled="true"]:not([variant="icon"]){
  background: var(--c-disabledColor);
  color: var(--c-secondaryText);
  box-shadow: none;
}
.yflow y-button[aria-disabled="true"][variant="icon"]{ opacity: .55; }
.yflow y-button[fill]{ display: flex; width: 100%; justify-content: center; }

/* ── panel ── */
.yflow y-panel{
  display: block;
  padding: var(--space-lg);
  border-radius: var(--radius-md);
  background: var(--c-translucentSurface);
  font: var(--type-monoBody);
  color: var(--c-primaryText);
}
.yflow [data-mode="dark"] y-panel{ background: rgba(255, 255, 255, .15); }
.yflow y-panel[flush]{ padding: 0; }

/* ── topbar ── */
.yflow y-topbar{
  position: relative;
  display: flex;
  align-items: center;
  height: 44px;                        
  padding: 0 var(--space-sm);
}
.yflow y-topbar .slot{ display: flex; flex: 1; }
.yflow y-topbar .slot.end{ justify-content: flex-end; }
.yflow y-topbar .title{
  position: absolute; left: 50%; transform: translateX(-50%);
  font: var(--type-monoSubheadlineSemibold);
  color: var(--c-primaryText);
  pointer-events: none;
}

/* ── bubble ── */
.yflow y-bubble{ display: flex; gap: var(--space-sm); }
.yflow y-bubble .bubble{
  display: block;
  max-width: 300px;                    
  padding: var(--space-lg);
  font: var(--type-monoBody);
  color: var(--c-primaryText);
}
.yflow y-bubble .caption{
  display: block;
  margin-top: var(--space-s);           
  font: var(--type-monoCaption);
  color: inherit;
  opacity: .70;                         
  text-align: right;
}
.yflow y-bubble[sender="assistant"]{ align-items: flex-start; }
.yflow y-bubble[sender="assistant"] .bubble{
  background: rgba(255, 255, 255, .85);   
  border-radius: 4px 20px 20px 20px;
}
.yflow [data-mode="dark"] y-bubble[sender="assistant"] .bubble{ background: rgba(255, 255, 255, .15); }
.yflow y-bubble[sender="user"]{ align-items: flex-end; justify-content: flex-end; }
.yflow y-bubble[sender="user"] .bubble{
  background: var(--c-primaryAccent);
  color: var(--c-primaryAccentContrastText);
  border-radius: 20px 20px 4px 20px;
}
.yflow y-bubble[sender="app"]{ align-items: center; justify-content: center; }
.yflow y-bubble[sender="app"] .bubble{
  background: none;
  max-width: none;
  padding: 0;
  font: var(--type-monoSubheadline);
  color: var(--c-secondaryText);
  text-align: center;
}

/* ── input-bar ── */
.yflow y-input-bar{
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
.yflow y-input-bar .field{
  flex: 1;
  min-width: 0;
  padding: var(--space-m) var(--space-lg);
  border: 0;
  border-radius: 20px;                 
  background: color-mix(in srgb, var(--c-secondaryBackground) 60%, transparent);
  font: var(--type-monoBody);
  color: var(--c-primaryText);
}
.yflow y-input-bar .field::placeholder{ color: var(--c-faintText); }
.yflow y-input-bar .field:focus-visible{ outline: 2px solid var(--c-primaryAccent); outline-offset: 1px; }
.yflow y-input-bar y-button.active{ color: var(--c-primaryAccent); }

/* ── dots ── */
.yflow y-dots{ display: inline-flex; line-height: 0; }
.yflow y-dots svg{ display: block; overflow: visible; }
.yflow y-dots path{
  stroke: rgba(255, 255, 255, .30);      
  stroke-width: .5;
  animation: y-affect-cycle 2s linear infinite;
}
.yflow [data-mode="dark"] y-dots path{ animation-name: y-affect-cycle-dark; }
@media (prefers-reduced-motion: reduce) {.yflow y-dots path{ animation: none; fill: var(--c-secondaryAccent); }}
@keyframes y-affect-cycle {
  0% { fill: hsl(46.8 78.3% 77%); }
  8.3% { fill: hsl(72.0 78.3% 77%); }
  16.7% { fill: hsl(115.2 78.3% 77%); }
  25% { fill: hsl(154.8 78.3% 77%); }
  33.3% { fill: hsl(187.2 78.3% 77%); }
  41.7% { fill: hsl(208.8 78.3% 77%); }
  50% { fill: hsl(226.8 78.3% 77%); }
  58.3% { fill: hsl(248.4 78.3% 77%); }
  66.7% { fill: hsl(273.6 78.3% 77%); }
  75% { fill: hsl(298.8 78.3% 77%); }
  83.3% { fill: hsl(327.6 78.3% 77%); }
  91.7% { fill: hsl(367.2 78.3% 77%); }
  100% { fill: hsl(406.8 78.3% 77%); }
}
@keyframes y-affect-cycle-dark {
  0% { fill: hsl(46.8 47% 58.5%); }
  8.3% { fill: hsl(72.0 47% 58.5%); }
  16.7% { fill: hsl(115.2 47% 58.5%); }
  25% { fill: hsl(154.8 47% 58.5%); }
  33.3% { fill: hsl(187.2 47% 58.5%); }
  41.7% { fill: hsl(208.8 47% 58.5%); }
  50% { fill: hsl(226.8 47% 58.5%); }
  58.3% { fill: hsl(248.4 47% 58.5%); }
  66.7% { fill: hsl(273.6 47% 58.5%); }
  75% { fill: hsl(298.8 47% 58.5%); }
  83.3% { fill: hsl(327.6 47% 58.5%); }
  91.7% { fill: hsl(367.2 47% 58.5%); }
  100% { fill: hsl(406.8 47% 58.5%); }
}

/* ── badge ── */
.yflow y-badge{
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-md);
  border-radius: 8px;
  background: color-mix(in srgb, var(--c-secondaryBackground) 70%, transparent);
  font: var(--type-monoCaption);
  color: var(--c-secondaryText);
}
.yflow y-badge[capsule]{ border-radius: var(--radius-full); }
.yflow y-badge .dot{ width: 8px; height: 8px; border-radius: 50%; flex: none;
               background: currentColor; }
.yflow y-badge > y-icon{ flex: none; }
.yflow y-badge[tint="faint"]{ color: var(--c-tertiaryText); }
.yflow y-badge[tint="success"]{ color: var(--c-success); }
.yflow y-badge[tone="accent"]{ background: var(--c-primaryAccent);
                         color: var(--c-primaryAccentContrastText); }
.yflow y-badge[tone="positive"]{ background: color-mix(in srgb, var(--c-moodPositive) 30%, transparent); }
.yflow y-badge[tone="neutral"]{ background: color-mix(in srgb, var(--c-moodNeutral) 34%, transparent); }
.yflow y-badge[tone="challenging"]{ background: color-mix(in srgb, var(--c-moodChallenging) 40%, transparent); }
.yflow y-badge[tone="positive"] .dot{ background: var(--c-moodPositive); }
.yflow y-badge[tone="neutral"] .dot{ background: var(--c-moodNeutral); }
.yflow y-badge[tone="challenging"] .dot{ background: var(--c-moodChallenging); }

/* ── avatar ── */
.yflow y-avatar{
  --tint: var(--c-secondaryAccent);
  position: relative;
  display: inline-grid;
  place-items: center;
  width: var(--avatar-size, 28px);
  height: var(--avatar-size, 28px);
  flex: none;
}
.yflow y-avatar[speaker="user"]{ --tint: var(--c-primaryAccent); }
.yflow y-avatar svg, .yflow y-avatar img{ grid-area: 1 / 1; width: 100%; height: 100%; display: block; }
.yflow y-avatar .initial{
  --s: var(--avatar-size, 28px);
  grid-area: 1 / 1;
  transform: translateY(calc(var(--s) * .09));   
  font: var(--type-monoCaption);
  font-size: calc(var(--s) * .4286);             
  font-weight: 600;
  line-height: 1;
  color: #fff;
  text-shadow: 0 .5px 1px rgba(0, 0, 0, .3);     
}
.yflow y-avatar .initial y-icon{ --icon-size: calc(var(--s) * .393); }

/* ── divider ── */
.yflow y-divider{ display: flex; align-items: center; gap: var(--space-md); }
.yflow y-divider .rule{ flex: 1; height: 1px; background: var(--c-dividerColor); }
.yflow y-divider .label{
  display: inline-flex; align-items: center; gap: var(--space-xs);
  font: var(--type-monoCaption);
  color: var(--c-secondaryText);
  white-space: nowrap;
}

/* ── hex-selector ── */
.yflow y-hex-selector{ display: block; line-height: 0; }
.yflow y-hex-selector svg{ display: block; width: 100%; height: auto; }
.yflow y-hex-selector .grid path{
  stroke: rgba(255, 255, 255, .15);       
  stroke-width: .18;
}
.yflow y-hex-selector .face{
  fill: rgba(255, 255, 255, .50);
  stroke: rgba(255, 255, 255, .85);
  stroke-width: .35;
}
.yflow y-hex-selector .dot{
  fill: #fff;
  stroke: var(--c-primaryAccent);
  stroke-width: .5;
  filter: drop-shadow(0 0 1.4px color-mix(in srgb, var(--c-primaryAccent) 30%, transparent));
}

/* ── intensity ── */
.yflow y-intensity{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
  padding: 0 28px;
  width: 100%;
  max-width: 361px;          
  box-sizing: border-box;
}
.yflow y-intensity > .ask{
  font: var(--type-monoCaption);
  color: var(--c-secondaryText);
}
.yflow y-intensity > .dial{
  display: block;
  width: 100%;
  max-width: 240px;
  height: auto;
}
.yflow y-intensity > .dial .sep{
  fill: none; stroke: rgba(255, 255, 255, .30); stroke-width: .5;   
}
.yflow y-intensity > .dial .rim{
  fill: none; stroke: rgba(255, 255, 255, .70); stroke-width: 1;    
}
.yflow y-intensity > .dial .sel{
  fill: none; stroke: #fff; stroke-width: 3.5;   
}
.yflow y-intensity > .dial .pip{ fill: rgba(255, 255, 255, .70); }
.yflow y-intensity > .word{
  font: var(--type-monoBody);
  color: var(--c-primaryText);
}
.yflow y-intensity > y-emotion-field{ width: 100%; max-width: 300px; }
.yflow y-intensity > .acts{ display: flex; gap: var(--space-lg); }
.yflow y-emotion-field{
  display: flex;
  align-items: center;
  gap: var(--space-s);
  box-sizing: border-box;
  padding: var(--space-sm) var(--space-lg);
  border-radius: 999px;
  
  background: color-mix(in srgb, var(--c-secondaryBackground) 50%, transparent);
}
.yflow y-emotion-field > .val{
  flex: 1;
  min-width: 0;
  font: var(--type-monoBody);
  color: var(--c-primaryText);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.yflow y-emotion-field > .val--empty{ color: var(--c-tertiaryText); }
.yflow y-emotion-field > .chev{
  display: flex;
  padding: var(--space-s);
  margin: calc(var(--space-s) * -1);
  color: var(--c-secondaryText);
  line-height: 0;
}

/* ── hex-swatch ── */
.yflow y-hex-swatch{ display: inline-block; line-height: 0; }
.yflow y-hex-swatch svg{
  display: block;
  width: var(--sw-size, 20px);
  height: var(--sw-size, 20px);
}
.yflow y-hex-swatch[pulses] svg{
  animation: y-hex-breath var(--sw-period, 3s) ease-in-out infinite;
}
@keyframes y-hex-breath {
  0%, 100% { opacity: .5; }
  50%      { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {.yflow y-hex-swatch[pulses] svg{ animation: none; opacity: 1; }}

/* ── chart ── */
.yflow y-chart{ display: block; }
.yflow y-chart .cap{
  font: var(--type-monoCaption);
  color: var(--c-secondaryText);
  margin-bottom: var(--space-s);
}
.yflow y-chart .plot{ display: flex; gap: var(--space-s); align-items: stretch; }
.yflow y-chart .ticks{
  display: flex; flex-direction: column; justify-content: space-between;
  font: var(--type-monoCaption);
  color: var(--c-faintText);
  text-align: right;
  min-width: 1.4em;
}
.yflow y-chart svg{ flex: 1; height: 74px; display: block; overflow: visible; }
.yflow y-chart .area{ fill: color-mix(in srgb, var(--c-primaryAccent) 22%, transparent); }
.yflow y-chart .line{ fill: none; stroke: var(--c-primaryAccent); stroke-width: 1.5;
                stroke-linejoin: round; stroke-linecap: round; }
.yflow y-chart .mid{ stroke: var(--c-dividerColor); stroke-width: 1; stroke-dasharray: 3 3; }
.yflow y-chart .axis{
  display: flex; justify-content: space-between;
  margin: 4px 0 0 calc(1.4em + var(--space-s));
  font: var(--type-monoCaption);
  color: var(--c-faintText);
}

/* ── hexmap ── */
.yflow y-hexmap{ display: block; }
.yflow y-hexmap .head{
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-sm);
  font: var(--type-monoSubheadline);
  color: var(--c-primaryText);
  margin-bottom: var(--space-sm);
}
.yflow y-hexmap .count{ font: var(--type-monoCaption); color: var(--c-secondaryText); }
.yflow y-hexmap svg{ display: block; width: 100%; }
.yflow y-hexmap .cell{ stroke: rgba(255, 255, 255, .55); stroke-width: .25; }
.yflow y-hexmap .dwell{ fill: none; }
.yflow y-hexmap .trail{ stroke: #fff; stroke-linecap: round; }
.yflow y-hexmap .dot{ fill: #fff; stroke: rgba(0, 0, 0, .28); stroke-width: .3; }
.yflow y-hexmap .hover{
  min-height: 1.2em;
  margin-top: var(--space-s);
  text-align: center;
  font: var(--type-monoCaption);
  color: var(--c-secondaryText);
}
.yflow y-hexmap .none{ text-align: center; padding: var(--space-xl) 0 var(--space-md); }
.yflow y-hexmap .none y-icon{ color: var(--c-faintText); }
.yflow y-hexmap .none p{
  margin: var(--space-sm) 0 0;
  font: var(--type-monoCaption);
  color: var(--c-secondaryText);
}

/* ── segmented ── */
.yflow y-segmented{
  display: flex;
  gap: 2px;
  padding: 2px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--c-secondaryBackground) 70%, transparent);
  font: var(--type-monoCaption);
}
.yflow y-segmented .seg{
  flex: 1 1 0;
  text-align: center;
  padding: 5px 0;
  border-radius: calc(var(--radius-sm) - 2px);
  color: var(--c-secondaryText);
}
.yflow y-segmented .seg[aria-selected="true"]{
  background: var(--c-primaryBackground);
  color: var(--c-primaryText);
  font-weight: 600;
}

/* ── feeling ── */
.yflow y-feeling{
  --tint: var(--c-primaryAccent);
  position: relative;
  display: inline-flex; align-items: center; gap: var(--space-sm);
  padding: 9px var(--space-lg);
  border-radius: var(--radius-full);
  font: var(--type-monoSubheadline);
  color: var(--c-primaryText);
  background: var(--c-primaryBackground);
  
  overflow: hidden;
  isolation: isolate;
}
.yflow y-feeling .ring{
  position: absolute; top: 50%; left: 50%;
  width: 220%; aspect-ratio: 1;
  z-index: -2;
  background: conic-gradient(from 0deg,
    var(--c-moodPositive), var(--c-primaryAccent), var(--c-secondaryAccent),
    var(--c-moodChallenging), var(--c-moodPositive));
  animation: y-affect-spin 9s linear infinite;
}
.yflow y-feeling[data-state="prompt"]::before{
  content: ""; position: absolute; inset: 1.5px; z-index: -1;
  border-radius: inherit; background: var(--c-primaryBackground);
}
@keyframes y-affect-spin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}
.yflow y-feeling[data-state="logged"]{
  border: 1px solid var(--c-dividerColor);
  padding: 7px var(--space-md) 7px var(--space-sm);
}
@media (prefers-reduced-motion: reduce) {}

/* ── journal-row ── */
.yflow y-day{
  display: flex; align-items: center; gap: var(--space-sm);
  padding: var(--space-sm) var(--space-xs);
  font: var(--type-monoSubheadline);
  font-weight: 600;
  color: var(--c-primaryText);
}
.yflow y-day .d{ margin-right: auto; }
.yflow y-day .n{ font: var(--type-monoCaption); font-weight: 400; color: var(--c-secondaryText); }
.yflow y-day .c{ color: var(--c-faintText); display: inline-flex; }
.yflow y-day[aria-expanded="true"] .c{ transform: rotate(90deg); }
.yflow y-day[aria-expanded="false"] .c{ transform: rotate(90deg); }
.yflow y-entry{
  display: flex; align-items: flex-start; gap: var(--space-sm);
  padding: var(--space-md);
  border-radius: var(--radius-md);
  background: var(--c-secondaryBackground);
}
.yflow y-entry .ic{ color: var(--c-primaryAccent); flex: none; margin-top: 1px; }
.yflow y-entry .txt{ display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.yflow y-entry .meta{ font: var(--type-monoCaption); color: var(--c-secondaryText); }
.yflow y-entry .prev{
  font: var(--type-monoBody);
  color: var(--c-primaryText);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── card ── */
.yflow y-card{
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-md);
  background: var(--c-translucentSurface);
  box-shadow: inset 0 0 0 1px var(--c-dividerColor);
  cursor: pointer;
}
.yflow y-card > y-icon{ color: var(--c-primaryAccent); }
.yflow y-card .text{ flex: 1; min-width: 0; font: var(--type-monoBody); color: var(--c-primaryText); }
.yflow y-card .dismiss{ color: var(--c-faintText); font-size: 12px; cursor: pointer; flex: none; }

/* ── row ── */
.yflow y-row{
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md);
  border-radius: var(--radius-md);
  background: var(--c-translucentSurface);
}
.yflow y-row > y-icon{ color: var(--c-secondaryText); flex: none; }
.yflow y-row[tint="accent"] > y-icon{ color: var(--c-primaryAccent); }
.yflow y-row[tint="success"] > y-icon{ color: var(--c-success); }
.yflow y-row .t{
  flex: 1; min-width: 0;
  font: var(--type-monoBody);
  color: var(--c-primaryText);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.yflow y-row .x{ flex: none; font: var(--type-monoCaption); color: var(--c-secondaryText); }
.yflow y-row .c{ flex: none; display: inline-flex; color: var(--c-faintText); }

/* ── tabbar ── */
.yflow y-tabbar{
  display: flex;
  width: 100%;
  border-top: 1px solid var(--c-dividerColor);
  background: var(--c-translucentSurface);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.yflow y-tabbar .item{
  flex: 1 1 0;
  min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 7px var(--space-xxs) 6px;
  font-family: var(--font-ui);
  font-size: 10px;
  line-height: 1.2;
  text-align: center;
  color: var(--c-faintText);
}
.yflow y-tabbar .label{
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.yflow y-tabbar .item[aria-current="page"]{ color: var(--c-primaryAccent); }

/* ── device ── */
.yflow y-device{
  display: inline-flex;
  flex-direction: column;
  gap: 0;
  
  width: calc(var(--d-w) * var(--d-scale, 1));
  vertical-align: top;
}
.yflow y-device > .device{
  position: relative;
  width: var(--d-w);
  height: var(--d-h);
  flex: none;
  display: flex;
  flex-direction: column;
  border-radius: var(--d-r);
  overflow: hidden;
  background: var(--c-primaryBackground);
  transform: scale(var(--d-scale, 1));
  transform-origin: top left;
  margin-bottom: calc(var(--d-h) * (var(--d-scale, 1) - 1));
}
.yflow y-device > .device{
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .10),
              0 0 0 11px #3a3a3c,
              0 0 0 12px var(--c-dividerColor);
  margin-left: 12px;
}
.yflow y-device > .device > .island{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 999px;
  background: #000;
  z-index: 3;
}
.yflow y-device > .device > .indicator{
  position: absolute;
  left: 50%;
  bottom: 8px;
  width: 140px;
  height: 5px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: color-mix(in srgb, var(--c-primaryText) 30%, transparent);
  z-index: 3;
  pointer-events: none;
}
.yflow y-device > .device > .safe--top{ height: var(--safe-top); flex: none; }
.yflow y-device > .device > .top{ flex: none; }
.yflow y-device > .device > .body{
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
}
.yflow y-device > .device > .tabs{ flex: none; }
.yflow y-device > .device > .tabs > y-tabbar{ padding-bottom: var(--safe-bottom); }
.yflow y-device > .device > .body:empty::after{
  content: "";
  flex: 1;
}
.yflow y-device[guides] > .device > .safe--top, .yflow y-device[guides] > .device > .tabs{ position: relative; }
.yflow y-device[guides] > .device > .safe--top::after, .yflow y-device[guides] > .device > .tabs::after{
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(-45deg,
    color-mix(in srgb, var(--c-primaryAccent) 14%, transparent) 0 6px,
    transparent 6px 12px);
  pointer-events: none;
}
.yflow y-device[guides] > .device > .tabs::after{ top: auto; height: var(--safe-bottom); }
.yflow y-device > .caption{
  margin: 0 0 var(--space-md) 12px;
  font: var(--type-monoCaption);
  color: var(--c-secondaryText);
  overflow-wrap: anywhere;
}
.yflow .u-devices{
  display: grid;
  grid-template-columns: max-content;
  justify-content: start;
  align-items: start;
  gap: var(--space-xxl);
  margin: 1.25rem 0 1.75rem -12px;
  
  padding: 12px 12px var(--space-s);
}
@media (min-width: 1190px) {.yflow .u-devices{ grid-template-columns: repeat(2, max-content); }}
@media (min-width: 1640px) {.yflow .u-devices{ grid-template-columns: repeat(3, max-content); }}

/* ── phone ── */
.yflow y-phone{
  display: block;
  width: 100%;
  max-width: 380px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: linear-gradient(to bottom, var(--c-secondaryBackground), var(--c-primaryBackground));
}
.yflow y-screen{
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  padding: var(--space-lg);
  min-height: 320px;
}
.yflow y-screen[tight]{ gap: var(--space-md); }
.yflow y-screen y-tabbar{ margin: auto calc(var(--space-lg) * -1) calc(var(--space-lg) * -1); }

/* ── screen ── */


/* ── screen utilities ── */
.yflow .scr{ display: flex; flex-direction: column; flex: 1; min-height: 0;
       padding: var(--space-lg); }
.yflow .scr--checkin{
  gap: var(--space-xl);
  padding: 80px 0 var(--space-xl);
}
.yflow .scr--checkin > .greet, .yflow .scr--checkin > .u-row{ padding-left: var(--space-xxxl); padding-right: var(--space-xxxl); }
.yflow .scr--checkin > y-bubble{ padding: 0 var(--space-xl); }
.yflow .scr--checkin > .u-row, .yflow .scr--checkin > y-bubble{ margin-top: var(--space-xxxxl); }
.yflow .scr--checkin .greet{
  font-family: var(--font-ui);
  font-size: 32px;
  font-weight: 500;
  font-style: italic;
  line-height: 1.21;
  color: var(--c-primaryText);
  text-align: center;
  padding-top: var(--space-xl);
}
.yflow .scr--checkin .disc{
  margin-top: auto; align-self: stretch;
  padding: var(--space-xl) var(--space-xxxl) 0;
  display: flex; flex-direction: column; gap: var(--space-sm);
}
.yflow .scr--checkin .disc__head{
  display: flex; align-items: center; justify-content: space-between;
  font: var(--type-monoCaption);
  color: var(--c-secondaryText);
}
.yflow .scr--checkin .disc__head y-icon{ color: var(--c-faintText); }
.yflow .scr--talk{ gap: var(--space-md); padding: var(--space-lg) var(--space-xl); }
.yflow .scr--talk y-dots{ align-self: flex-start; }
.yflow .scr--talk .startup{ display: flex; justify-content: center; padding-top: 40px; }
.yflow .scr--talk .wrap{ margin-top: auto; display: flex; justify-content: center; }
.yflow .scr--mood{ gap: var(--space-lg); }
.yflow .scr--mood .sticky{
  position: sticky; top: calc(var(--space-lg) * -1); z-index: 2;
  margin: calc(var(--space-lg) * -1) calc(var(--space-lg) * -1) 0;
  padding: var(--space-lg) var(--space-lg) var(--space-sm);
  background: var(--c-primaryBackground);
}
.yflow .scr--journal{ gap: var(--space-sm); }
.yflow .scr--journal .tsub{ margin: 0; font: var(--type-monoCaption); color: var(--c-tertiaryText); }
.yflow .scr--journal .part{
  display: flex; align-items: center; justify-content: space-between;
  font: var(--type-monoCaption);
  color: var(--c-secondaryText);
}
.yflow .scr--journal .part .acts{ display: flex; gap: var(--space-md); color: var(--c-faintText); }
.yflow .scr--journal .body{ margin: 0; font: var(--type-monoBody); color: var(--c-primaryText); }
.yflow .scr--journal .sticky{
  position: sticky; top: calc(var(--space-lg) * -1); z-index: 2;
  margin: calc(var(--space-lg) * -1) calc(var(--space-lg) * -1) 0;
  padding: var(--space-lg) var(--space-lg) var(--space-sm);
  background: var(--c-primaryBackground);
}
.yflow .scr .rule{ border: 0; border-top: 1px solid var(--c-dividerColor);
             margin: var(--space-sm) 0; }
.yflow .scr--settings{ gap: var(--space-sm); }
.yflow .scr--settings .field{ display: flex; justify-content: space-between; gap: var(--space-md);
                        font: var(--type-monoBody); }
.yflow .scr--settings .field .k{ color: var(--c-secondaryText); }
.yflow .scr--settings .field .v{ color: var(--c-primaryText); }
.yflow .u-row{ display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); }
.yflow .u-col{ display: flex; flex-direction: column; gap: var(--space-md); }
.yflow .u-col-lg{ display: flex; flex-direction: column; gap: var(--space-xl); }
.yflow .u-center{ justify-content: center; text-align: center; }
.yflow .u-end{ justify-content: flex-end; }
.yflow .u-fill{ flex: 1; }
.yflow .u-wide{ align-items: stretch; }
.yflow .u-column{ flex-basis: 361px; max-width: 100%; }
.yflow .u-assets{ display: grid; gap: var(--space-xl) var(--space-lg); margin: 1.25rem 0 1.75rem;
             max-width: 60rem;
             grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); }
.yflow .u-palette{ display: grid; grid-template-columns: repeat(6, 1fr);
             gap: 0 var(--space-xs); margin: 1rem 0 .35rem; }
.yflow .u-palette figure{ margin: 0; min-width: 0; }
.yflow .u-palette .chip{ height: 3.5rem; border-radius: var(--radius-sm);
                   border: 1px solid var(--c-dividerColor); }
.yflow .u-palette figcaption{ margin-top: .3rem; font: var(--type-monoCaption);
  font-size: .6rem; color: var(--c-faintText); overflow-wrap: anywhere; }
.yflow .u-body{ font: var(--type-monoBody); }
.yflow .u-sub{ font: var(--type-monoSubheadline); }
.yflow .u-caption{ font: var(--type-monoCaption); }
.yflow .u-title{ font: var(--type-monoTitle2); }
.yflow .u-display{ font: var(--type-monoDisplay); }
.yflow .u-ink{ color: var(--c-primaryText); }
.yflow .u-dim{ color: var(--c-secondaryText); }
.yflow .u-faint{ color: var(--c-faintText); }
.yflow .u-accent{ color: var(--c-primaryAccent); }
.yflow .u-pad{ padding: var(--space-lg); }
.yflow .u-pad-xxl{ padding: var(--space-xxl); }

/* ── flow chrome: the animation's own, not from the design system ── */
.yflow { position: relative; display: flex; justify-content: center; }
.yflow y-device > .device { overflow: hidden; }
.yflow y-device > .caption { display: none; }
.yflow.yflow-notop y-device > .device > .top { opacity: 0; pointer-events: none; }
.yflow y-device > .device > .top { transition: opacity .25s; }
.yflow .yflow-greet { font-size: 20px; font-weight: 600; color: var(--c-primaryText); margin: 4px 0 14px; }
.yflow .yflow-tap { position: absolute; width: 26px; height: 26px; border-radius: 50%;
  background: rgba(0,0,0,.14); border: 1.5px solid rgba(0,0,0,.30);
  transform: translate(-50%,-50%) scale(.7); opacity: 0; pointer-events: none; z-index: 60;
  transition: left .45s cubic-bezier(.4,0,.2,1), top .45s cubic-bezier(.4,0,.2,1), opacity .2s, transform .2s; }
.yflow .yflow-tap.on { opacity: 1; transform: translate(-50%,-50%) scale(1); }
.yflow .yflow-tap.press { transform: translate(-50%,-50%) scale(.62); background: rgba(0,0,0,.26); }
.yflow .yflow-scrim { position: absolute; inset: 0; background: rgba(0,0,0,.26); opacity: 0;
  transition: opacity .35s; z-index: 30; pointer-events: none; }
.yflow .yflow-scrim.on { opacity: 1; }
.yflow .yflow-cover {
  position: absolute; inset: 0; z-index: 40;
  background: linear-gradient(180deg, var(--c-primaryBackground) 0%, var(--c-tertiaryBackground) 100%);
  display: flex; flex-direction: column; padding: 0 var(--space-sm);
  transform: translateY(100%); transition: transform .42s cubic-bezier(.32,.72,0,1);
}
.yflow .yflow-cover.up { transform: translateY(0); }
.yflow .yflow-slot { height: 52px; flex: none; }
.yflow .yflow-field { flex: 1; display: flex; flex-direction: column; justify-content: center; min-height: 0; }
.yflow .yflow-cap { text-align: center; font-size: 13px; color: var(--c-secondaryText); margin-top: 14px; min-height: 18px; }
.yflow .yflow-note { text-align: center; font-size: 14px; margin-top: 10px; min-height: 20px;
  color: var(--c-faintText); border-bottom: 1px solid var(--c-dividerColor);
  padding: 4px 8px; max-width: 220px; margin-left: auto; margin-right: auto; }
.yflow .yflow-note.filled { color: var(--c-primaryText); }
.yflow .yflow-close {
  position: absolute; top: var(--space-lg); right: var(--space-xl);
  width: 34px; height: 34px; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.55); backdrop-filter: blur(8px);
  color: var(--c-primaryText); font-size: 15px; line-height: 1; cursor: default;
  transition: opacity .2s;
}
.yflow .yflow-cover.picking .yflow-close { opacity: 0; }
.yflow .yflow-grid { width: 100%; height: auto; display: block; }
.yflow .yflow-grid .hex-grid, .yflow .yflow-grid .hex-hover,
.yflow .yflow-grid .hex-dot, .yflow .yflow-grid .hex-picker { transition: opacity .35s ease; }
.yflow .yflow-lvl { text-align: center; font-size: 17px; font-weight: 600;
  color: var(--c-primaryText); margin-top: 6px; min-height: 22px; }

.yflow .yflow-in-b { animation: yflowIn .4s ease both; }
@keyframes yflowIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.yflow .yflow-out { animation: yflowOut .4s ease both; }
@keyframes yflowOut { from { opacity: 1; } to { opacity: 0; transform: translateX(18px); } }
@media (prefers-reduced-motion: reduce) { .yflow .yflow-tap { display: none; }
  .yflow .yflow-in-b, .yflow .yflow-out { animation: none; } }

/* ── y-feeling inside the flow ──────────────────────────────────────────
   The capsule's rotating affect border is a 1.5px hairline. At the phone's
   0.62 scale that is under a pixel, so the animation is running but invisible.
   Thicken it here only — the app's own value is right at full size.

   The reduced-motion guard is also missing: docs/assets/components/feeling.css
   is truncated on disk (ends mid-selector, 8 braces open / 7 closed), so the
   rule that should stop the spin never parses. Restored below for the site. */
.yflow y-feeling[data-state="prompt"]::before { inset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .yflow y-feeling .ring { animation: none; }
}