const AiIcons = {
  Sparkle: ({ size=18, color }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="1.8" strokeLinejoin="round">
      <path d="M12 3l2.1 6.9L21 12l-6.9 2.1L12 21l-2.1-6.9L3 12l6.9-2.1z"/>
    </svg>
  ),
  Plane: ({ size=18, color }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <path d="M21 3 3 10.5l6.6 2.9L12 21z"/><path d="m9.6 13.4 5.4-4.9"/>
    </svg>
  ),
  Chart: ({ size=18, color }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="1.8" strokeLinecap="round">
      <path d="M5 20v-9M12 20V4M19 20v-6"/>
    </svg>
  ),
  Send: ({ size=18, color }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M12 19V5M6 11l6-6 6 6"/>
    </svg>
  ),
  Book: ({ size=18, color }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <path d="M4 5.5A2.5 2.5 0 0 1 6.5 3H20v15.5H6.5A2.5 2.5 0 0 0 4 21z"/><path d="M4 5.5V21"/><path d="M9 8h7"/>
    </svg>
  ),
  Home: ({ size=18, color }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="1.9" strokeLinecap="round" strokeLinejoin="round">
      <path d="M4 10.5L12 4l8 6.5"/><path d="M6 10.2V19a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1v-8.8"/>
    </svg>
  ),
};

const AI_ACTIONS = [
  { key: 'find_pickup',  label: '找接機',     desc: '機場接機、依行程排序', Icon: AiIcons.Plane },
  { key: 'find_dropoff', label: '找送機',     desc: '送機單、趕得上又順路', Icon: Icon.Hall },
  { key: 'find_home',    label: '找回家單',   desc: '下車點離歸屬地最近',   Icon: Icon.Pin },
  { key: 'flight',       label: '航班資訊',   desc: '接機班機落地了嗎',     Icon: AiIcons.Plane },
  { key: 'traffic',      label: '交通資訊',   desc: '去程路況與出發建議',   Icon: Icon.Car },
  { key: 'trips',        label: '我的行程',   desc: '今天跑哪幾趟、空檔',   Icon: Icon.Schedule },
  { key: 'earnings',     label: '我的收益',   desc: '本週收入與最佳時段',   Icon: AiIcons.Chart },
  { key: 'reason',       label: '推薦理由',   desc: '為什麼這張單適合我',   Icon: AiIcons.Sparkle },
  { key: 'help_menu',    label: '使用教學',   desc: '新手、歸屬地、小隊、發單怎麼用', Icon: AiIcons.Book },
];

function aiPayload(key) {
  const A = AI_DATA;
  switch (key) {
    case 'find_menu':
      return {
        text: '想找哪種單？我依你的行程與歸屬地幫你挑，已先排除時間衝突。',
        blocks: [],
        suggestions: A.suggestions.find_menu,
      };
    case 'find_pickup':
    case 'find_dropoff':
    case 'find_home': {
      const list = A.findLists[key];
      const items = list.nos.map(no => {
        const meta = A.fitMeta[no] || {};
        const useHome = key === 'find_home' && meta.homeTags;
        const tags = useHome ? meta.homeTags : meta.tags;
        const distanceText = useHome ? meta.homeTags[0] : meta.distanceText;
        return { order: DATA.hallOrders.find(x => x.no === no), fit: { ...meta, tags, distanceText } };
      });
      return { text: list.text, blocks: [{ type: 'orders', items }], suggestions: A.suggestions[key] };
    }
    case 'flight':
      return { text: '查到了，你 09:05 這趟接機的 BR-217 目前飛行中。', blocks: [{ type: 'flight', data: A.flight }], suggestions: A.suggestions.flight };
    case 'traffic':
      return {
        text: '08:02 更新：國1 內湖到機場系統順暢，國2 大園段車多。現在出發約 42 分，比順暢時多 8 分。',
        blocks: [{ type: 'traffic', data: A.traffic }],
        suggestions: A.suggestions.traffic,
      };
    case 'trips':
      return { text: '今天 2 趟行程，中間有 4 小時 20 分空檔。', blocks: [{ type: 'trips', data: A.trips }], suggestions: A.suggestions.trips };
    case 'earnings':
      return { text: '這週完成 16 趟，收入 NT$18,450，比上週多 12%。', blocks: [{ type: 'earnings', data: A.earnings }], suggestions: A.suggestions.earnings };
    case 'reason':
      return {
        text: '這張單同時符合你目前位置與今天下午的行程：',
        blocks: [{ type: 'reason', order: DATA.hallOrders.find(x => x.no === A.featuredReasonOrder), meta: A.reasonMeta }],
        suggestions: A.suggestions.reason,
      };
    case 'help_menu':
      return {
        text: '想看哪個主題？點下面選項，或直接打「歸屬地怎麼設」這種問法。',
        blocks: [{ type: 'help_menu', topics: A.helpTopics.map(t => ({ key: t.key, title: t.title, desc: t.desc })) }],
        suggestions: A.suggestions.help_menu,
      };
    default: {
      if (key && key.indexOf('help_') === 0) {
        const topic = A.helpTopics.find(t => key === 'help_' + t.key);
        if (topic) {
          return {
            text: topic.title,
            blocks: [{ type: 'help', topic }],
            suggestions: (topic.next || []).map(k => {
              const n = A.helpTopics.find(t => t.key === k);
              return { label: n ? n.title : k, action: 'help_' + k };
            }),
          };
        }
      }
      return { text: '我聽得懂找接機、找送機、找回家、航班、交通、行程、收益、推薦理由，也可以問我使用問題（例如「歸屬地怎麼設」）。先點下面的快速鍵試試。', blocks: [], suggestions: AI_ACTIONS.map(a => ({ label: a.label, action: a.key })) };
    }
  }
}

function AssistantFab({ dark, onClick }) {
  const th = useTheme(dark);
  return (
    <button onClick={onClick} className="press" style={{
      position: 'absolute', right: 14, bottom: 86, zIndex: 30,
      display: 'flex', alignItems: 'center', gap: 7, height: 46, padding: '0 16px', borderRadius: 23,
      background: th.text, color: th.surface, border: 'none', cursor: 'pointer',
      boxShadow: '0 8px 20px rgba(0,0,0,.28)', fontFamily: 'Noto Sans TC',
    }}>
      <AiIcons.Sparkle size={17} color={th.surface} />
      <span style={{ fontSize: FS(14), fontWeight: 800, color: th.surface }}>AI 助手</span>
    </button>
  );
}

function TypingBubble({ dark }) {
  const th = useTheme(dark);
  return (
    <div style={{
      background: th.surface, border: `1px solid ${th.border}`, borderRadius: '16px 16px 16px 4px',
      padding: '12px 14px', display: 'flex', gap: 4, alignItems: 'center',
    }}>
      {[0, 1, 2].map(i => (
        <span key={i} className="ai-dot" style={{ background: th.textMuted, animationDelay: `${i * 0.15}s` }} />
      ))}
    </div>
  );
}

function AcceptControls({ order, dark }) {
  const th = useTheme(dark);
  const [confirming, setConfirming] = React.useState(false);
  const [applied, setApplied] = React.useState(false);

  if (applied) {
    return (
      <div style={{
        marginTop: 10, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6,
        padding: '12px', borderRadius: 10, background: th.successBg, color: th.success, fontSize: FS(13), fontWeight: 800,
      }}>
        <Icon.Check size={16} color={th.success} />已送出申請，等待派單方確認
      </div>
    );
  }
  if (confirming) {
    return (
      <div style={{ marginTop: 10, background: th.surfaceAlt, borderRadius: 10, padding: '10px 12px' }}>
        <div style={{ fontSize: FS(12), color: th.textSub, lineHeight: 1.5 }}>
          確定申請 #{order.no}？送出後需等派單方確認。
        </div>
        <div style={{ display: 'flex', gap: 8, marginTop: 9 }}>
          <button onClick={() => setConfirming(false)} className="press" style={{
            flex: 1, height: 44, borderRadius: 9, border: `1px solid ${th.border}`, background: th.surface,
            color: th.text, fontSize: FS(13), fontWeight: 700, cursor: 'pointer', fontFamily: 'Noto Sans TC',
          }}>取消</button>
          <button onClick={() => setApplied(true)} className="press" style={{
            flex: 1, height: 44, borderRadius: 9, border: 'none', background: th.text,
            color: th.surface, fontSize: FS(13), fontWeight: 800, cursor: 'pointer', fontFamily: 'Noto Sans TC',
          }}>確定申請</button>
        </div>
      </div>
    );
  }
  return (
    <button onClick={() => setConfirming(true)} className="press" style={{
      marginTop: 10, width: '100%', height: 44, borderRadius: 10, border: 'none', background: th.text,
      color: th.surface, fontSize: FS(14), fontWeight: 800, cursor: 'pointer', fontFamily: 'Noto Sans TC',
    }}>申請接單</button>
  );
}

function AssistantOrderCard({ order, fit, dark }) {
  const th = useTheme(dark);
  const [expanded, setExpanded] = React.useState(false);
  const alert = order.urgent || order.surcharge;

  return (
    <div style={{
      background: th.surface, border: `1px solid ${alert ? '#D62B3A' : th.border}`,
      borderRadius: 13, padding: '11px 13px', marginBottom: 10,
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 6, flexWrap: 'wrap' }}>
        <TypeChip type={order.type} />
        {order.urgent && (
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4, background: '#D62B3A', color: '#FFF', fontSize: FS(11), fontWeight: 700, height: 22, padding: '0 9px', borderRadius: 6 }}>
            <span className="pulse-dot" style={{ width: 6, height: 6, borderRadius: '50%', background: '#FFF', display: 'inline-block' }} />急單
          </span>
        )}
        {order.surcharge && <span style={{ background: '#D62B3A', color: '#FFF', fontSize: FS(11), fontWeight: 700, height: 22, padding: '0 9px', borderRadius: 6 }}>＋加價</span>}
        {order.kenyi && <span style={{ border: '1px solid #888', color: th.textSub, fontSize: FS(11), fontWeight: 600, height: 22, padding: '0 9px', borderRadius: 6 }}>肯驛</span>}
        <span style={{ marginLeft: 'auto', fontFamily: FONTS.mono, fontSize: FS(11), color: th.textMuted }}>#{order.no}</span>
      </div>

      <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 9 }}>
        <span style={{ width: 9, height: 9, borderRadius: '50%', background: th.text, flexShrink: 0 }} />
        <span style={{ fontSize: FS(16), fontWeight: 700, color: th.text, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', flex: 1 }}>{order.routeFrom}</span>
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 2 }}>
        <span style={{ width: 9, height: 9, borderRadius: '50%', border: `2px solid ${th.textMuted}`, flexShrink: 0, boxSizing: 'border-box' }} />
        <span style={{ fontSize: FS(16), fontWeight: 700, color: th.text, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', flex: 1 }}>{order.routeTo}</span>
      </div>

      <div style={{ display: 'flex', alignItems: 'center', marginTop: 8 }}>
        <span style={{ fontFamily: FONTS.mono, fontSize: FS(12), color: th.textSub }}>{order.date} · {order.time} · {order.pax}人{order.bags}件</span>
        <span style={{ marginLeft: 'auto', fontFamily: FONTS.mono, fontSize: FS(22), fontWeight: 700, color: th.text }}>
          <span style={{ fontSize: FS(12), fontWeight: 600 }}>NT$</span>{order.price.toLocaleString()}
        </span>
      </div>

      <div style={{ display: 'flex', alignItems: 'center', gap: 6, flexWrap: 'wrap', marginTop: 9 }}>
        {fit.tags.map(tag => (
          <span key={tag} style={{ background: th.infoBg, color: th.info, fontSize: FS(11), fontWeight: 700, padding: '3px 8px', borderRadius: 6 }}>{tag}</span>
        ))}
        <span style={{ marginLeft: 'auto', fontFamily: FONTS.mono, fontSize: FS(10.5), color: th.textMuted }}>契合 {fit.score}</span>
      </div>

      <button onClick={() => setExpanded(!expanded)} className="press" style={{
        marginTop: 9, width: '100%', minHeight: 44, padding: '8px', borderRadius: 8, border: `1px dashed ${th.border}`,
        background: 'transparent', color: th.textSub, fontSize: FS(12), cursor: 'pointer', fontFamily: 'Noto Sans TC',
      }}>{expanded ? '收起詳細' : '展開詳細'}</button>

      {expanded && (
        <div style={{ marginTop: 9, borderTop: `1px dashed ${th.border}`, paddingTop: 9, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '8px 10px' }}>
          {[
            ['航班', order.flight || '—'],
            ['派單方', order.dispatcher],
            ['上車時間', `${order.date} ${order.time}`],
            ['距離你', fit.distanceText || '—'],
            ['備註', order.note || '—'],
          ].map(([k, v], i) => (
            <div key={k} style={{ gridColumn: k === '備註' ? 'span 2' : 'auto' }}>
              <div style={{ fontFamily: FONTS.mono, fontSize: FS(9.5), letterSpacing: 1, color: th.textMuted }}>{k}</div>
              <div style={{ fontSize: FS(13), fontWeight: 500, color: th.text, marginTop: 1 }}>{v}</div>
            </div>
          ))}
        </div>
      )}

      <AcceptControls order={order} dark={dark} />
    </div>
  );
}

function FlightStatusCard({ data, dark }) {
  const th = useTheme(dark);
  const [notified, setNotified] = React.useState(false);
  const [watch, setWatch] = React.useState(true);
  const kind = data.statusKind === 'warn' ? { fg: th.warn, bg: th.warnBg } : { fg: th.info, bg: th.infoBg };

  return (
    <div style={{ background: th.surface, border: `1px solid ${th.border}`, borderRadius: 13, padding: '12px 13px', marginBottom: 10 }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
        <span style={{ fontFamily: FONTS.mono, fontSize: FS(13), fontWeight: 800, color: th.info, background: th.infoBg, padding: '3px 7px', borderRadius: 6 }}>{data.airline}</span>
        <span style={{ fontFamily: FONTS.mono, fontSize: FS(20), fontWeight: 800, color: th.text }}>{data.number}</span>
        <span style={{ fontFamily: FONTS.mono, fontSize: FS(12), color: th.textSub }}>{data.from} → {data.to}</span>
        <span style={{ marginLeft: 'auto', background: kind.bg, color: kind.fg, fontSize: FS(11), fontWeight: 700, padding: '4px 9px', borderRadius: 999 }}>{data.statusLabel}</span>
      </div>

      <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 10, padding: '9px 10px', borderRadius: 9, background: th.warnBg }}>
        <span style={{ fontSize: FS(12), color: th.warn, fontWeight: 700, lineHeight: 1.5 }}>
          表定 {data.sched} · 預計 {data.est}（延誤 {data.delayMin} 分）
        </span>
        <span style={{ marginLeft: 'auto', fontFamily: FONTS.mono, fontSize: FS(10.5), color: th.textMuted }}>TDX</span>
      </div>

      <div style={{ display: 'flex', marginTop: 10, background: th.surfaceAlt, borderRadius: 10, padding: '10px 4px' }}>
        {[
          ['表定落地', data.sched],
          ['預計落地', data.est],
          ['可接時間', data.readyAt],
        ].map(([k, v]) => (
          <div key={k} style={{ flex: 1, textAlign: 'center' }}>
            <div style={{ fontSize: FS(10.5), color: th.textMuted }}>{k}</div>
            <div style={{ fontFamily: FONTS.mono, fontSize: FS(15), fontWeight: 700, color: th.text, marginTop: 2 }}>{v}</div>
          </div>
        ))}
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 8, marginTop: 10 }}>
        {[
          ['航廈', `T${data.terminal}`],
          ['登機門', data.gate],
          ['行李轉盤', data.baggage],
        ].map(([k, v]) => (
          <div key={k}>
            <div style={{ fontFamily: FONTS.mono, fontSize: FS(9.5), letterSpacing: 1, color: th.textMuted }}>{k}</div>
            <div style={{ fontFamily: FONTS.mono, fontSize: FS(14), fontWeight: 700, color: th.text, marginTop: 1 }}>{v}</div>
          </div>
        ))}
      </div>

      <div style={{ marginTop: 10, fontSize: FS(12.5), color: th.text, lineHeight: 1.6 }}>
        你的行程表定 <b>{data.pickup}</b> 上車；班機預計 <b>{data.est}</b> 落地，加通關約 <b>{data.readyAt}</b> 可接，
        較表定晚 <b>{data.pickupDelayMin}</b> 分，建議與派單方確認順延。<b>{data.adviseArrive}</b> 前抵達 T{data.terminal} 接機停車場。
      </div>

      <div style={{ marginTop: 10, display: 'flex', alignItems: 'center', gap: 10, background: th.surfaceAlt, borderRadius: 10, padding: '10px 12px' }}>
        <Icon.Bell size={17} color={watch ? th.text : th.textMuted} />
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontSize: FS(13), fontWeight: 700, color: th.text }}>航班提醒{watch ? '已開啟' : '已關閉'}</div>
          <div style={{ fontSize: FS(11.5), color: th.textSub, marginTop: 1 }}>落地、延誤、登機門與轉盤變更都通知你</div>
        </div>
        <Toggle on={watch} onChange={() => setWatch(!watch)} dark={dark} />
      </div>

      {notified ? (
        <div style={{ marginTop: 10, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6, padding: '10px', borderRadius: 9, background: th.successBg, color: th.success, fontSize: FS(13), fontWeight: 700 }}>
          <Icon.Check size={15} color={th.success} />已通知派單方（示範）
        </div>
      ) : (
        <button onClick={() => setNotified(true)} className="press" style={{
          marginTop: 10, width: '100%', height: 44, borderRadius: 9, border: `1px solid ${th.border}`,
          background: th.surface, color: th.text, fontSize: FS(13), fontWeight: 700, cursor: 'pointer', fontFamily: 'Noto Sans TC',
        }}>通知派單方班機延誤</button>
      )}

      <div style={{ marginTop: 9, fontFamily: FONTS.mono, fontSize: FS(10), color: th.textMuted }}>
        資料來源：TDX 桃園機場 FIDS · 更新 {data.updated}
      </div>
    </div>
  );
}

function TrafficCard({ data, dark }) {
  const th = useTheme(dark);
  const LV = {
    smooth: { fg: th.success, bg: th.successBg, label: '順暢' },
    busy:   { fg: th.warn, bg: th.warnBg, label: '車多' },
    jam:    { fg: th.danger, bg: th.dangerBg, label: '壅塞' },
  };
  return (
    <div style={{ background: th.surface, border: `1px solid ${th.border}`, borderRadius: 13, padding: '12px 13px', marginBottom: 10 }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
        <span style={{ fontSize: FS(11), fontWeight: 700, color: th.textMuted }}>起點 → 終點</span>
        <span style={{ marginLeft: 'auto', fontFamily: FONTS.mono, fontSize: FS(10), color: th.textMuted }}>更新 {data.updated}</span>
      </div>
      <div style={{ fontSize: FS(13.5), fontWeight: 700, color: th.text, marginTop: 4 }}>{data.from} → {data.to}</div>
      <div style={{ display: 'flex', gap: 6, marginTop: 8, flexWrap: 'wrap' }}>
        {data.via.map(v => <Pill key={v} fg={th.info} bg={th.infoBg} style={{ fontSize: FS(11) }}>經 {v}</Pill>)}
      </div>
      <div style={{ marginTop: 10, background: th.surfaceAlt, borderRadius: 10, padding: '10px 12px' }}>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
          <span style={{ fontSize: FS(11), color: th.textMuted }}>現在出發約</span>
          <span style={{ fontFamily: FONTS.mono, fontSize: FS(24), fontWeight: 800, color: th.text }}>{data.eta}</span>
          <span style={{ fontSize: FS(12), color: th.textSub }}>分</span>
          <span style={{ marginLeft: 'auto', fontSize: FS(12), fontWeight: 800, color: th.danger }}>+{data.delayMin} 分</span>
        </div>
        <div style={{ marginTop: 4, fontSize: FS(12), color: th.textSub }}>
          順暢時 {data.baseline} 分；建議 <b style={{ color: th.text }}>{data.adviseDepart}</b> 前出發（含 15 分緩衝）
        </div>
      </div>
      <div style={{ marginTop: 4 }}>
        {data.corridors.map(c => {
          const lv = LV[c.level];
          return (
            <div key={c.name} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '9px 0', borderBottom: `1px solid ${th.border}` }}>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: FS(13), fontWeight: 700, color: th.text }}>{c.name}<span style={{ fontWeight: 500, color: th.textSub }}>　{c.segment}</span></div>
                <div style={{ fontSize: FS(11.5), color: th.textMuted, marginTop: 2 }}>{c.note}</div>
              </div>
              <span style={{ fontFamily: FONTS.mono, fontSize: FS(14), fontWeight: 700, color: lv.fg }}>{c.speed}</span>
              <span style={{ fontSize: FS(10), color: th.textMuted, fontFamily: FONTS.mono }}>km/h</span>
              <span style={{ background: lv.bg, color: lv.fg, fontSize: FS(11), fontWeight: 800, padding: '3px 8px', borderRadius: 6 }}>{lv.label}</span>
            </div>
          );
        })}
      </div>
      <div style={{ marginTop: 9, fontFamily: FONTS.mono, fontSize: FS(10), color: th.textMuted }}>
        資料來源：TDX 高速公路 VD · 路網版次 {data.linkVersion}
      </div>
    </div>
  );
}

function TripsCard({ data, dark, onFind }) {
  const th = useTheme(dark);
  return (
    <div style={{ background: th.surface, border: `1px solid ${th.border}`, borderRadius: 13, padding: '12px 13px', marginBottom: 10 }}>
      <div style={{ display: 'flex', alignItems: 'baseline' }}>
        <span style={{ fontSize: FS(13), fontWeight: 800, color: th.text }}>今天 · {data.date}</span>
        <span style={{ marginLeft: 'auto', fontFamily: FONTS.mono, fontSize: FS(12), color: th.textSub }}>{data.items.length} 趟</span>
      </div>
      <div style={{ marginTop: 4 }}>
        {data.items.map((t, i) => (
          <div key={t.no} style={{
            display: 'flex', alignItems: 'center', gap: 8, padding: '9px 0',
            borderBottom: i < data.items.length - 1 ? `1px solid ${th.border}` : 'none',
            ...(t.next ? { background: th.infoBg, margin: '0 -6px', padding: '9px 6px', borderRadius: 8 } : {}),
          }}>
            <span style={{ fontFamily: FONTS.mono, fontSize: FS(13), fontWeight: 700, color: th.text, width: 42 }}>{t.time}</span>
            <TypeChip type={t.type} style={{ height: 18, fontSize: FS(10) }} />
            <span style={{ fontSize: FS(13), fontWeight: 600, color: th.text, flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{t.from} → {t.to}</span>
            <span style={{ fontFamily: FONTS.mono, fontSize: FS(12), color: th.textSub }}>{t.flight}</span>
          </div>
        ))}
      </div>
      <div style={{ marginTop: 10, background: th.surfaceAlt, borderRadius: 10, padding: '10px 12px', display: 'flex', alignItems: 'center' }}>
        <div>
          <div style={{ fontSize: FS(11), color: th.textMuted }}>空檔</div>
          <div style={{ fontFamily: FONTS.mono, fontSize: FS(14), fontWeight: 700, color: th.text, marginTop: 1 }}>{data.gap.start}–{data.gap.end} · {data.gap.label}</div>
        </div>
      </div>
      <button onClick={onFind} className="press" style={{
        marginTop: 10, width: '100%', height: 44, borderRadius: 9, border: 'none', background: th.text,
        color: th.surface, fontSize: FS(13), fontWeight: 800, cursor: 'pointer', fontFamily: 'Noto Sans TC',
      }}>找空檔順路的單</button>
    </div>
  );
}

function EarningsCard({ data, dark }) {
  const th = useTheme(dark);
  const max = Math.max(...data.bars.map(b => b.v), 1);
  return (
    <div style={{ background: th.surface, border: `1px solid ${th.border}`, borderRadius: 13, padding: '12px 13px', marginBottom: 10 }}>
      <div style={{ fontSize: FS(11), color: th.textMuted }}>本週收入</div>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginTop: 2 }}>
        <Amount value={data.week} size={28} dark={dark} />
        <span style={{ fontSize: FS(12), fontWeight: 700, color: th.success }}>+{data.wow}%</span>
      </div>
      <div style={{ display: 'flex', marginTop: 10, background: th.surfaceAlt, borderRadius: 10, padding: '9px 4px' }}>
        {[
          ['今日', `NT$${data.today.toLocaleString()}`],
          ['今日趟數', `${data.todayTrips} 趟`],
          ['每趟平均', `NT$${data.avg.toLocaleString()}`],
        ].map(([k, v]) => (
          <div key={k} style={{ flex: 1, textAlign: 'center' }}>
            <div style={{ fontSize: FS(10.5), color: th.textMuted }}>{k}</div>
            <div style={{ fontFamily: FONTS.mono, fontSize: FS(13), fontWeight: 700, color: th.text, marginTop: 2 }}>{v}</div>
          </div>
        ))}
      </div>
      <div style={{ display: 'flex', alignItems: 'flex-end', gap: 6, height: 76, marginTop: 12 }}>
        {data.bars.map(b => (
          <div key={b.d} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4, height: '100%', justifyContent: 'flex-end' }}>
            <div style={{
              width: '100%', maxWidth: 22, borderRadius: 4,
              height: Math.max(4, Math.round(b.v / max * 54)),
              background: b.today ? th.text : (b.v === 0 ? th.border : th.textMuted),
              opacity: b.v === 0 ? .45 : 1,
            }} />
            <span style={{ fontSize: FS(10), color: b.today ? th.text : th.textMuted, fontWeight: b.today ? 800 : 500 }}>{b.d}</span>
          </div>
        ))}
      </div>
      <div style={{ marginTop: 10, fontSize: FS(12.5), color: th.text, lineHeight: 1.6 }}>
        最佳時段 <b>{data.bestWindow}</b>，平均 <b>NT${data.bestAvg.toLocaleString()}</b>/趟。高鐵早班與送機尖峰是你的穩定來源。
      </div>
      <div style={{ marginTop: 8, fontFamily: FONTS.mono, fontSize: FS(10), color: th.textMuted }}>
        以已完成行程計算，已扣接單費用（示範資料）
      </div>
    </div>
  );
}

function ReasonCard({ order, meta, dark }) {
  const th = useTheme(dark);
  return (
    <div style={{ background: th.surface, border: `1px solid ${th.border}`, borderRadius: 13, padding: '12px 13px', marginBottom: 10 }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
        <TypeChip type={order.type} />
        <span style={{ fontSize: FS(13), fontWeight: 700, color: th.text, flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{order.routeFrom} → {order.routeTo}</span>
        <span style={{ fontFamily: FONTS.mono, fontSize: FS(14), fontWeight: 700, color: th.text }}>NT${order.price.toLocaleString()}</span>
      </div>
      <div style={{ fontFamily: FONTS.mono, fontSize: FS(11), color: th.textMuted, marginTop: 3 }}>#{order.no} · {order.date} {order.time}</div>
      <div style={{ marginTop: 10 }}>
        {meta.reasons.map(r => (
          <div key={r.label} style={{ display: 'flex', gap: 8, padding: '7px 0', borderTop: `1px solid ${th.border}` }}>
            <span style={{
              flexShrink: 0, height: 20, padding: '0 8px', borderRadius: 6, display: 'inline-flex', alignItems: 'center',
              background: th.infoBg, color: th.info, fontSize: FS(11), fontWeight: 700,
            }}>{r.label}</span>
            <span style={{ fontSize: FS(13), color: th.text, lineHeight: 1.55 }}>{r.text}</span>
          </div>
        ))}
      </div>
      <AcceptControls order={order} dark={dark} />
    </div>
  );
}

function HelpMenuCard({ topics, dark, onPick }) {
  const th = useTheme(dark);
  return (
    <div style={{ background: th.surface, border: `1px solid ${th.border}`, borderRadius: 13, padding: '4px 6px', marginBottom: 10 }}>
      {topics.map((t, i) => (
        <button key={t.key} onClick={() => onPick('help_' + t.key)} className="press" style={{
          width: '100%', minHeight: 56, display: 'flex', alignItems: 'center', gap: 10, textAlign: 'left',
          background: 'transparent', border: 'none', cursor: 'pointer', fontFamily: 'Noto Sans TC',
          borderTop: i > 0 ? `1px solid ${th.border}` : 'none', padding: '9px 8px',
        }}>
          <span style={{
            width: 28, height: 28, borderRadius: 9, background: th.surfaceAlt, flexShrink: 0,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontFamily: FONTS.mono, fontSize: FS(12), fontWeight: 700, color: th.textSub,
          }}>{String(i + 1).padStart(2, '0')}</span>
          <span style={{ flex: 1, minWidth: 0, display: 'block' }}>
            <span style={{ display: 'block', fontSize: FS(14), fontWeight: 700, color: th.text }}>{t.title}</span>
            <span style={{ display: 'block', fontSize: FS(11.5), color: th.textSub, marginTop: 1 }}>{t.desc}</span>
          </span>
          <Icon.ChevronR size={15} color={th.textMuted} />
        </button>
      ))}
    </div>
  );
}

function HelpCard({ topic, dark }) {
  const th = useTheme(dark);
  return (
    <div style={{ background: th.surface, border: `1px solid ${th.border}`, borderRadius: 13, padding: '12px 13px', marginBottom: 10 }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
        <span style={{ width: 30, height: 30, borderRadius: 9, background: th.infoBg, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
          <AiIcons.Book size={16} color={th.info} />
        </span>
        <span style={{ fontSize: FS(15), fontWeight: 800, color: th.text }}>{topic.title}</span>
      </div>
      <div style={{ marginTop: 10 }}>
        {topic.steps.map((s, i) => (
          <div key={i} style={{ display: 'flex', gap: 9, padding: '7px 0', borderTop: i > 0 ? `1px solid ${th.border}` : 'none' }}>
            <span style={{
              width: 20, height: 20, borderRadius: '50%', flexShrink: 0, background: th.text, color: th.surface,
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
              fontFamily: FONTS.mono, fontSize: FS(10.5), fontWeight: 700, marginTop: 1,
            }}>{i + 1}</span>
            <span style={{ fontSize: FS(13), color: th.text, lineHeight: 1.55 }}>{s}</span>
          </div>
        ))}
      </div>
      {topic.note && (
        <div style={{ marginTop: 9, background: th.warnBg, borderRadius: 9, padding: '9px 11px', fontSize: FS(12.5), color: th.warn, fontWeight: 600, lineHeight: 1.55 }}>
          注意：{topic.note}
        </div>
      )}
      {topic.linkHint && (
        <div style={{ marginTop: 8, display: 'flex', alignItems: 'center', gap: 6, fontSize: FS(12.5), color: th.info }}>
          <Icon.Pin size={14} color={th.info} />{topic.linkHint}
        </div>
      )}
      <div style={{ marginTop: 8, fontFamily: FONTS.mono, fontSize: FS(10), color: th.textMuted }}>
        教學卡 · 由 goGMO 規則產生，非 AI 生成
      </div>
    </div>
  );
}

function ReminderCard({ data, dark, onAction }) {
  const th = useTheme(dark);
  return (
    <div style={{ background: th.surface, border: `1px solid ${th.border}`, borderRadius: 13, padding: '12px 13px', marginBottom: 10, boxShadow: '0 3px 12px rgba(0,0,0,.06)' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
        <span style={{ width: 30, height: 30, borderRadius: 9, background: th.text, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
          {data.kind === 'flight' ? <Icon.Bell size={15} color={th.surface} /> : <Icon.Car size={15} color={th.surface} />}
        </span>
        <span style={{ fontSize: FS(11.5), fontWeight: 700, color: th.textSub }}>goGMO 主動提醒 · {data.kindLabel}</span>
        <span style={{ marginLeft: 'auto', fontFamily: FONTS.mono, fontSize: FS(10.5), color: th.textMuted }}>{data.time}</span>
      </div>
      <div style={{ fontSize: FS(15), fontWeight: 800, color: th.text, marginTop: 9, lineHeight: 1.45 }}>{data.title}</div>
      {data.lines.map((l, i) => (
        <div key={i} style={{ fontSize: FS(12.5), color: th.textSub, marginTop: 4, lineHeight: 1.6 }}>{l}</div>
      ))}
      {data.cta && (
        <button onClick={() => onAction(data.cta.action)} className="press" style={{
          marginTop: 10, width: '100%', height: 44, borderRadius: 9, border: `1px solid ${th.border}`,
          background: th.bg, color: th.text, fontSize: FS(13), fontWeight: 700, cursor: 'pointer', fontFamily: 'Noto Sans TC',
        }}>{data.cta.label}</button>
      )}
    </div>
  );
}

function AiActionCard({ action, dark, onPick, wide }) {
  const th = useTheme(dark);
  return (
    <button onClick={() => onPick(action.key)} className="press" style={{
      gridColumn: wide ? 'span 2' : 'auto',
      display: 'flex', flexDirection: wide ? 'row' : 'column', alignItems: wide ? 'center' : 'flex-start',
      gap: wide ? 12 : 8, textAlign: 'left',
      background: th.surface, border: `1px solid ${th.border}`, borderRadius: 14, padding: '13px 14px',
      cursor: 'pointer', fontFamily: 'Noto Sans TC', minHeight: wide ? 64 : 84,
    }}>
      <span style={{
        width: 34, height: 34, borderRadius: 10, background: th.surfaceAlt, flexShrink: 0,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
      }}>
        <action.Icon size={18} color={th.text} />
      </span>
      <span style={{ flex: wide ? 1 : 'none' }}>
        <span style={{ display: 'block', fontSize: FS(15), fontWeight: 800, color: th.text }}>{action.label}</span>
        <span style={{ display: 'block', fontSize: FS(11.5), color: th.textSub, marginTop: 2, lineHeight: 1.4 }}>{action.desc}</span>
      </span>
      {wide && <Icon.ChevronR size={16} color={th.textMuted} />}
    </button>
  );
}

function AssistantOrdersBlock({ items, dark }) {
  const th = useTheme(dark);
  const [visible, setVisible] = React.useState(3);
  const shown = items.slice(0, visible);
  const rest = items.length - shown.length;
  return (
    <div>
      {shown.map(it => <AssistantOrderCard key={it.order.no} order={it.order} fit={it.fit} dark={dark} />)}
      {rest > 0 && (
        <button onClick={() => setVisible(v => v + 5)} className="press" style={{
          width: '100%', minHeight: 44, borderRadius: 10, border: `1px solid ${th.border}`,
          background: th.surface, color: th.text, fontSize: FS(13), fontWeight: 700,
          cursor: 'pointer', fontFamily: 'Noto Sans TC', marginBottom: 10,
        }}>顯示更多（還有 {rest} 筆）</button>
      )}
    </div>
  );
}

function AssistantWelcome({ dark, onPick, onDemo }) {
  const th = useTheme(dark);
  return (
    <div style={{ padding: '6px 16px 14px' }}>
      <div style={{ fontSize: FS(20), fontWeight: 900, color: th.text, letterSpacing: -.4 }}>午安，{DATA.driver.name}</div>
      <div style={{ fontSize: FS(13), color: th.textSub, marginTop: 4, lineHeight: 1.6 }}>
        今天 2 趟行程，中間有 4 小時 20 分空檔。需要我幫你找順路的單嗎？
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, marginTop: 14 }}>
        {AI_ACTIONS.map(a => <AiActionCard key={a.key} action={a} dark={dark} onPick={onPick} wide={a.key === 'help_menu'} />)}
      </div>
      <div style={{ marginTop: 12, fontSize: FS(11), color: th.textMuted, textAlign: 'center' }}>
        也可以直接打字問我，例如「歸屬地怎麼設」
      </div>
      <button onClick={onDemo} className="press" style={{
        marginTop: 12, width: '100%', minHeight: 52, borderRadius: 12, border: `1px dashed ${th.border}`,
        background: 'transparent', color: th.textSub, cursor: 'pointer', fontFamily: 'Noto Sans TC',
        display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8, fontSize: FS(13), fontWeight: 700,
      }}>
        <Icon.Bell size={16} color={th.textSub} />模擬：看看主動提醒長什麼樣
      </button>
    </div>
  );
}

function AssistantSheet({ dark, onClose }) {
  const th = useTheme(dark);
  const [msgs, setMsgs] = React.useState([]);
  const [typing, setTyping] = React.useState(false);
  const [input, setInput] = React.useState('');
  const scrollRef = React.useRef(null);

  React.useEffect(() => {
    const el = scrollRef.current;
    if (el) el.scrollTop = el.scrollHeight;
  }, [msgs, typing]);

  function runIntent(key, skipUser) {
    if (typing) return;
    if (!skipUser) {
      const topic = AI_DATA.helpTopics.find(t => key === 'help_' + t.key);
      const q = AI_DATA.questions[key] || (topic && topic.q) || '使用教學';
      setMsgs(m => [...m, { id: Date.now(), role: 'user', text: q }]);
    }
    setTyping(true);
    setTimeout(() => {
      const p = aiPayload(key);
      setMsgs(m => [...m, { id: Date.now() + 1, role: 'ai', ...p }]);
      setTyping(false);
    }, 750);
  }

  function runDemo() {
    if (typing) return;
    setTyping(true);
    setTimeout(() => {
      setMsgs(m => [...m, {
        id: Date.now(), role: 'ai',
        text: '（模擬）不久後你會在手機通知與訊息中心收到這幾則主動提醒：',
        blocks: [
          { type: 'reminder', data: AI_DATA.reminders.landed },
          { type: 'reminder', data: AI_DATA.reminders.departSoon },
          { type: 'reminder', data: AI_DATA.reminders.depart },
        ],
        suggestions: [{ label: '我的行程', action: 'trips' }, { label: '航班資訊', action: 'flight' }],
      }]);
      setTyping(false);
    }, 700);
  }

  function routeText(text) {
    if (/路況|交通|塞|車流|國道/.test(text)) return 'traffic';
    if (/航班|落地|起飛|班機/.test(text)) return 'flight';
    if (/行程|空檔|跑哪/.test(text)) return 'trips';
    if (/賺|收入|收益|錢/.test(text)) return 'earnings';
    if (/為什麼|理由|推薦/.test(text)) return 'reason';
    if (/教學|新手|怎麼|如何|什麼是|是什麼|可以嗎|教我|不懂|小隊|車頭|發單/.test(text)) return 'help_menu';
    if (/回家單|找回家|順路回家|回程單/.test(text)) return 'find_home';
    if (/找接機|接機單|接機/.test(text)) return 'find_pickup';
    if (/找送機|送機/.test(text)) return 'find_dropoff';
    if (/找單|找.*單|訂單|接單|大廳|適合|有沒有單|有單嗎/.test(text)) return 'find_menu';
    return null;
  }

  function send() {
    const text = input.trim();
    if (!text || typing) return;
    setInput('');
    const key = routeText(text);
    if (!key) {
      setMsgs(m => [...m, { id: Date.now(), role: 'user', text }]);
      setTyping(true);
      setTimeout(() => {
        const p = aiPayload('unknown');
        setMsgs(m => [...m, { id: Date.now() + 1, role: 'ai', ...p }]);
        setTyping(false);
      }, 650);
      return;
    }
    setMsgs(m => [...m, { id: Date.now(), role: 'user', text }]);
    setTyping(true);
    setTimeout(() => {
      const p = aiPayload(key);
      setMsgs(m => [...m, { id: Date.now() + 1, role: 'ai', ...p }]);
      setTyping(false);
    }, 750);
  }

  return (
    <div style={{ position: 'absolute', inset: 0, zIndex: 400 }}>
      <div onClick={onClose} className="fade-in" style={{ position: 'absolute', inset: 0, background: 'rgba(15,15,14,.35)' }} />
      <div className="slide-up" style={{
        position: 'absolute', left: 0, right: 0, bottom: 0, height: '92%',
        background: th.bg, borderTopLeftRadius: 22, borderTopRightRadius: 22,
        display: 'flex', flexDirection: 'column', overflow: 'hidden',
        boxShadow: '0 -8px 30px rgba(0,0,0,.28)',
      }}>
        <div style={{ padding: '10px 16px 11px', background: th.surface, borderBottom: `1px solid ${th.border}` }}>
          <div style={{ width: 36, height: 4, borderRadius: 2, background: th.border, margin: '0 auto 10px' }} />
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <span style={{
              width: 34, height: 34, borderRadius: 10, background: th.text, color: th.surface,
              display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
            }}>
              <AiIcons.Sparkle size={18} color={th.surface} />
            </span>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontSize: FS(15), fontWeight: 800, color: th.text }}>goGMO 助手</div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 5, fontSize: FS(11), color: th.textSub, marginTop: 1 }}>
                <span className="pulse-dot" style={{ width: 6, height: 6, borderRadius: '50%', background: th.success, display: 'inline-block' }} />
                    找接機 · 找送機 · 找回家 · 航班 · 路況 · 行程 · 收益 · 教學
              </div>
            </div>
            {msgs.length > 0 && (
              <button onClick={() => setMsgs([])} className="press" aria-label="回到助理首頁" style={{
                width: 44, height: 44, borderRadius: '50%', border: `1px solid ${th.border}`, background: th.surface,
                display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer',
              }}><AiIcons.Home size={16} color={th.text} /></button>
            )}
            <button onClick={onClose} className="press" style={{
              width: 44, height: 44, borderRadius: '50%', border: `1px solid ${th.border}`, background: th.surface,
              display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer',
            }}><Icon.Close size={16} color={th.text} /></button>
          </div>
        </div>

        <div ref={scrollRef} className="scroll-hide" style={{ flex: 1, overflowY: 'auto', padding: msgs.length ? '14px 16px 8px' : '0' }}>
          {msgs.length === 0 && <AssistantWelcome dark={dark} onPick={runIntent} onDemo={runDemo} />}
          {msgs.map(m => (
            <div key={m.id} style={{ display: 'flex', flexDirection: 'column', alignItems: m.role === 'user' ? 'flex-end' : 'flex-start', marginBottom: 12 }}>
              <div style={{
                maxWidth: '86%', fontSize: FS(14), lineHeight: 1.6,
                padding: '10px 14px',
                borderRadius: m.role === 'user' ? '16px 16px 4px 16px' : '16px 16px 16px 4px',
                background: m.role === 'user' ? th.text : th.surface,
                color: m.role === 'user' ? th.surface : th.text,
                border: m.role === 'user' ? 'none' : `1px solid ${th.border}`,
                fontWeight: m.role === 'user' ? 500 : 400,
              }}>{m.text}</div>
              {m.blocks && m.blocks.length > 0 && (
                <div style={{ width: '100%', marginTop: 9 }}>
                  {m.blocks.map((b, i) => {
                    if (b.type === 'orders') return <AssistantOrdersBlock key={i} items={b.items} dark={dark} />;
                    if (b.type === 'flight') return <FlightStatusCard key={i} data={b.data} dark={dark} />;
                    if (b.type === 'traffic') return <TrafficCard key={i} data={b.data} dark={dark} />;
                    if (b.type === 'trips') return <TripsCard key={i} data={b.data} dark={dark} onFind={() => runIntent('find_menu')} />;
                    if (b.type === 'earnings') return <EarningsCard key={i} data={b.data} dark={dark} />;
                    if (b.type === 'reason') return <ReasonCard key={i} order={b.order} meta={b.meta} dark={dark} />;
                    if (b.type === 'help_menu') return <HelpMenuCard key={i} topics={b.topics} dark={dark} onPick={runIntent} />;
                    if (b.type === 'help') return <HelpCard key={i} topic={b.topic} dark={dark} />;
                    if (b.type === 'reminder') return <ReminderCard key={i} data={b.data} dark={dark} onAction={runIntent} />;
                    return null;
                  })}
                </div>
              )}
              {m.suggestions && m.suggestions.length > 0 && (
                <div style={{ display: 'flex', gap: 7, flexWrap: 'wrap', marginTop: 9 }}>
                  {m.suggestions.map(s => (
                    <button key={s.action} onClick={() => runIntent(s.action)} className="press" style={{
                      minHeight: 44, padding: '0 14px', borderRadius: 22, border: `1px solid ${th.border}`,
                      background: th.surface, color: th.text, fontSize: FS(12.5), fontWeight: 700,
                      cursor: 'pointer', fontFamily: 'Noto Sans TC',
                    }}>{s.label}</button>
                  ))}
                </div>
              )}
            </div>
          ))}
          {typing && <div style={{ display: 'flex', marginBottom: 12 }}><TypingBubble dark={dark} /></div>}
        </div>

        <div className="scroll-hide" style={{ display: 'flex', gap: 7, overflowX: 'auto', padding: '9px 16px', background: th.surface, borderTop: `1px solid ${th.border}` }}>
          {AI_ACTIONS.map(a => (
            <button key={a.key} onClick={() => runIntent(a.key)} className="press" style={{
              flexShrink: 0, height: 44, padding: '0 15px', borderRadius: 22,
              border: `1px solid ${th.border}`, background: th.bg, color: th.text,
              fontSize: FS(12.5), fontWeight: 700, cursor: 'pointer', fontFamily: 'Noto Sans TC',
              display: 'inline-flex', alignItems: 'center', gap: 6,
            }}>
              <a.Icon size={14} color={th.text} />{a.label}
            </button>
          ))}
        </div>

        <div style={{
          display: 'flex', gap: 8, padding: '10px 14px',
          paddingBottom: 'max(env(safe-area-inset-bottom,0px), 12px)',
          background: th.surface, borderTop: `1px solid ${th.border}`,
        }}>
          <input
            value={input}
            onChange={e => setInput(e.target.value)}
            onKeyDown={e => { if (e.key === 'Enter') send(); }}
            placeholder="輸入問題，例如：明天早上的單"
            style={{
              flex: 1, height: 44, borderRadius: 22, border: `1px solid ${th.border}`,
              background: th.bg, color: th.text, padding: '0 14px', fontSize: FS(14),
              fontFamily: 'Noto Sans TC', outline: 'none', minWidth: 0,
            }}
          />
          <button onClick={send} className="press" style={{
            width: 44, height: 44, borderRadius: '50%', border: 'none', flexShrink: 0,
            background: input.trim() ? th.text : th.surfaceAlt,
            cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}>
            <AiIcons.Send size={18} color={input.trim() ? th.surface : th.textMuted} />
          </button>
        </div>
      </div>
    </div>
  );
}
