/* chat.css
   The Cura chat demo, rebuilt from the LIVE chat screen code (landing-rebuild-v1, 2026-08-17):
   ChatHeader.tsx, MessageBubbles.tsx + messageStyles.ts, CuraReplyAvatar.tsx (static phase),
   markdownStyles.ts (paragraph + actions block), followup pills, ChatLimitBar.tsx (meter line),
   InputBar.tsx, MainTabBar.tsx + TabBarItem.tsx. Every value is the app's value; every color is a
   tokens.css name whose comment cites its theme.ts key or the app file:line for the few hexes the
   app hardcodes. The bezel is shared with the food frame in phone.css. No em dashes. */

.chat-screen{background:var(--canvas);border-radius:34px;overflow:hidden;display:flex;flex-direction:column;
  font-family:'Figtree',sans-serif;color:var(--ink);text-align:left;line-height:normal}
.chat-screen svg{display:block}

/* ChatHeader.tsx:48-81 */
.ch-head{height:58px;padding:0 20px;display:flex;align-items:center;gap:11px;border-bottom:1px solid var(--canvas)}
.ch-head .avatar{width:34px;height:34px}
.ch-title{font-family:'Bricolage Grotesque';font-weight:600;font-size:18px;line-height:20px;color:var(--ink);font-optical-sizing:none}
.ch-reviewed{display:flex;align-items:center;gap:4px;margin-top:2px}
.ch-reviewed .ico-shield{width:12px;height:12px;color:var(--primary)}
.ch-reviewed span{font-size:11.5px;font-weight:600;color:var(--primary)}
.ch-reviewed .ico-chev{width:11px;height:11px;color:var(--caption)}

/* Message list */
.ch-list{padding:8px 0 4px}

/* User bubble: messageStyles.ts:12-43 */
.m-user{padding:4px 16px;display:flex;flex-direction:column;align-items:flex-end}
.m-user .bub{background:var(--primary);border-radius:18px;border-bottom-right-radius:4px;padding:10px 14px;max-width:78%;
  color:var(--text-on-dark);font-size:15px;line-height:22px}
.m-user .t{font-size:11px;color:var(--caption);margin-top:2px;padding-right:4px}

/* Cura reply: messageStyles.ts:50-86, CuraReplyAvatar.tsx (static: 14px avatar in a 28px slot) */
.m-cura{padding:4px 16px}
.m-cura .who{display:flex;align-items:center;gap:4px;margin:0 0 6px 4px;height:28px}
.m-cura .who .avatar{width:14px;height:14px}
.m-cura .who b{font-size:11.5px;font-weight:700;color:var(--primary)}
.m-cura .who .t{font-size:11px;font-weight:500;color:var(--caption)}
.m-cura .bub{background:var(--cura-chat-surface);border:1px solid var(--cura-chat-surface-line);
  border-radius:18px;border-top-left-radius:5px;padding:11px 14px;max-width:88%;display:grid;gap:12px}
/* markdownStyles.ts:30-35 paragraph */
.m-cura .bub p{font-size:15px;line-height:22px;color:var(--body)}
/* markdownStyles.ts:98-127 actions block: ember mark as punctuation, ink text */
.m-cura .acts{background:var(--canvas);border-radius:10px;padding:12px 14px;display:grid;gap:10px}
.m-cura .act{display:flex;align-items:flex-start;gap:10px}
.m-cura .act::before{content:'';width:3px;height:16px;border-radius:2px;background:var(--ember);margin-top:3px;flex:0 0 auto}
.m-cura .act span{flex:1;font-size:15px;line-height:22px;font-weight:500;color:var(--ink)}
/* Landing-only chip kept from the live site, rendered in app tokens (selectedBg + primary). */
.m-cura .chip-day{display:inline-flex;align-items:center;gap:6px;background:var(--selected-bg);color:var(--primary);
  border-radius:var(--pill);padding:5px 11px;font-size:12px;font-weight:600;justify-self:start}
.m-cura .chip-day .icon-check{width:12px;height:12px;stroke-width:2.6}

/* Follow-up pills: messageStyles.ts:88-108 */
.m-pills{display:flex;gap:8px;padding:0 16px;margin:8px 0 4px;overflow:hidden}
.m-pills span{background:var(--surface);border:1.5px solid var(--pill-line);border-radius:20px;padding:8px 14px;
  font-size:13px;color:var(--primary);white-space:nowrap;box-shadow:var(--shadow-pill)}

/* Composer: InputBar.tsx:45, 85-132 */
.ch-input{border-top:1px solid var(--canvas);padding:6px 16px 8px;background:var(--canvas)}
.ch-input .disc{font-size:11px;font-weight:500;color:var(--caption);text-align:center;margin-bottom:6px}
.ch-input .row{display:flex;align-items:flex-end;gap:8px}
.ch-input .field{flex:1;min-width:0;height:48px;background:var(--surface);border:1px solid var(--surface-mid);border-radius:24px;
  padding:0 16px;display:flex;align-items:center;font-size:15px;color:var(--caption)}
/* Empty composer: sendButtonDisabled opacity .4 (InputBar.tsx) */
.ch-input .send{width:48px;height:48px;border-radius:24px;background:var(--ember);display:grid;place-items:center;box-shadow:var(--shadow-button);opacity:.4}
.ch-input .send .ico{width:20px;height:20px;color:var(--ink)}

/* Tab bar: MainTabBar.tsx:73-85, TabBarItem.tsx:103-178 */
.ch-tabs{display:flex;align-items:center;background:var(--surface);padding:10px 0 8px;border-top:1px solid var(--tab-bar-line)}
.ch-tabs .tab{flex:1;display:flex;flex-direction:column;align-items:center;padding-top:4px}
.ch-tabs .iw{width:40px;height:28px;border-radius:14px;display:grid;place-items:center}
.ch-tabs .iw .ico{width:20px;height:20px;color:var(--tab-inactive)}
.ch-tabs .lbl{font-size:10px;color:var(--tab-inactive);margin-top:2px}
.ch-tabs .tab.on .iw{background:var(--tab-active-fill)}
.ch-tabs .tab.on .iw .ico,.ch-tabs .tab.on .lbl{color:var(--primary)}
.ch-tabs .tab.on .lbl{font-weight:600}
.ch-tabs .fab{width:44px;height:44px;border-radius:22px;background:var(--ink-deep);margin-top:-8px;overflow:hidden;position:relative;
  box-shadow:0 4px 10px rgba(7,32,26,.30)}
.ch-tabs .fab .avatar{width:44px;height:44px}
.ch-tabs .fab::after{content:'';position:absolute;top:-8px;left:-8px;width:36px;height:36px;border-radius:18px;background:var(--cura-sheen);opacity:.6}
.ch-tabs .tab.on .lbl.chat{color:var(--primary);font-weight:600}