:root { color-scheme: light; --paper:#ffffff; --ink:#181627; --muted:#686579; --sage:#27c8f5; --deep:#087a9c; --line:#e4e1eb; --white:#ffffff; --conversation:#27c8f5; --conversation-ink:#06495e; --place:#9be33c; --place-ink:#294500; --travel:#ffd43b; --travel-ink:#594400; --fun:#ff4fa3; --fun-ink:#4d0c2c; }
* { box-sizing:border-box; }
body { margin:0; background:#eef1f5; font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic","Noto Sans JP",sans-serif; color:var(--ink); }
button,textarea { font:inherit; }
button { cursor:pointer; }
.phone-shell { width:min(100%,430px); height:100dvh; margin:auto; background:var(--paper); display:grid; grid-template-rows:auto auto 1fr auto auto; position:relative; overflow:hidden; box-shadow:0 0 50px #51605830; }
.topbar { display:flex; align-items:center; justify-content:space-between; padding:calc(14px + env(safe-area-inset-top)) 16px 12px; border-bottom:1px solid var(--line); background:#fffffff2; backdrop-filter:blur(18px); z-index:2; }
.eyebrow { margin:0 0 2px; font-size:10px; letter-spacing:.18em; font-weight:700; color:#7b8c82; }
h1,h2 { margin:0; font-family:inherit; font-weight:750; }
h1 { font-size:26px; }
h2 { font-size:27px; }
.connection { border:0; background:#e6ece4; color:var(--deep); border-radius:20px; padding:8px 11px; display:flex; gap:7px; align-items:center; font-size:11px; }
.connection span { width:7px; height:7px; background:#5b9168; border-radius:50%; }
.connection.offline span { background:#b8765e; }
.top-actions { display:flex; align-items:center; gap:5px; }
.collection-button { border:0; background:#e4f1ff; color:#15569e; border-radius:14px; padding:5px 7px; font-size:15px; line-height:1; }
.collection-button small { display:block; margin-top:2px; font-size:7px; white-space:nowrap; }
.account-button { border:1px solid var(--line); background:transparent; color:var(--deep); border-radius:18px; padding:7px 9px; font-size:10px; }
.mode-banner { padding:7px 12px; text-align:center; background:#e9faff; border-bottom:1px solid #9de7fa; color:#145468; font-size:10px; font-weight:700; }
.view { display:none; min-width:0; overflow-y:auto; overflow-x:hidden; padding:14px 16px 120px; background:#fff; }
#conversationView { padding-bottom:250px; }
.view.active { display:block; }
.day-label { text-align:center; color:var(--muted); font-size:11px; padding:6px 0 18px; }
.messages { display:flex; flex-direction:column; gap:6px; }
.message-row { display:flex; align-items:flex-end; gap:6px; transition:background .3s; border-radius:18px; }
.message-row.speaker-start { margin-top:9px; }
.message-row.mine { justify-content:flex-end; }
.message-row.assistant { justify-content:center; }
.message-row.highlight { background:#e7dcae; }
.message-content { max-width:calc(84% - 34px); display:flex; flex-direction:column; align-items:flex-start; }
.mine .message-content { align-items:flex-end; }
.assistant .message-content { max-width:92%; align-items:center; }
.speaker-avatar,.thread-speaker-avatar { flex:0 0 auto; display:grid; place-items:center; border:1px solid #c9d2df; border-radius:50%; background:#eef2f7; color:#344054; font-weight:800; }
.speaker-avatar { width:30px; height:30px; margin-bottom:4px; font-size:10px; }
.mine .speaker-avatar { order:3; }
.avatar-spacer { visibility:hidden; }
.speaker-name { margin:0 5px 3px; color:#667085; font-size:9px; font-weight:700; }
.bubble { max-width:100%; padding:12px 13px 7px; background:var(--white); border-radius:6px 18px 18px 18px; box-shadow:0 4px 18px #4552490b; line-height:1.55; font-size:14px; overflow-wrap:anywhere; }
.mine .bubble { background:#fff; border:2px solid #d7e0ee; border-radius:18px 6px 18px 18px; }
.assist-action { flex:0 0 34px; width:34px; height:34px; margin-bottom:5px; border:0; border-radius:50%; background:transparent; color:#7894aa; font-size:11px; }
.assist-action:focus-visible,.assist-action:active { background:#e4f1ff; outline:2px solid #7cafe3; }
.mine .assist-action { order:-1; }
.mine .sticker-bubble { min-width:92px; padding:13px 16px 8px; border:1px solid #cfdcca; background:#eef4eb; font-size:17px; font-weight:700; text-align:center; }
.assistant .bubble { max-width:92%; background:#f0ecf6; border:1px solid #ded5e8; border-radius:18px; color:#3d3547; }
.ai-byline { display:block; margin-bottom:5px; color:#77678a; font-size:9px; font-weight:700; letter-spacing:.08em; }
.bubble a,.saved-card a { color:#376b62; }
.bubble footer { display:flex; justify-content:flex-end; align-items:center; gap:7px; margin-top:7px; color:var(--muted); font-size:9px; }
.message-menu { border:0; padding:0 2px; background:transparent; color:#8a918c; font-size:10px; letter-spacing:.08em; }
.queued { color:#a85f44; font-weight:700; }
.topic-dock { position:absolute; right:12px; bottom:129px; z-index:3; display:flex; flex-direction:column; align-items:flex-end; gap:8px; pointer-events:none; }
.topic-dock[hidden] { display:none; }
.topic-entry { pointer-events:auto; display:flex; align-items:center; gap:7px; padding:0; border:0; background:transparent; color:var(--deep); filter:drop-shadow(0 5px 10px #3d4b4321); }
.topic-label { max-width:142px; padding:6px 9px; border:1px solid #dedfd7; border-radius:14px; background:#fffdf5e8; backdrop-filter:blur(10px); font-size:10px; font-weight:700; white-space:nowrap; }
.topic-orb { width:43px; height:43px; position:relative; display:grid; place-items:center; border:1px solid #d9ded6; border-radius:50%; background:#edf1e9; color:var(--deep); font-size:17px; }
.topic-dot { position:absolute; top:1px; right:1px; width:7px; height:7px; border:2px solid var(--paper); border-radius:50%; background:#d6a85b; }
.collection-view { padding-top:12px; }
.collection-header { display:flex; align-items:center; gap:10px; padding:5px 2px 10px; }
.collection-header button { width:34px; height:34px; border:1px solid var(--line); border-radius:50%; background:var(--white); color:var(--deep); font-size:27px; line-height:1; }
.collection-header h2 { font-size:24px; }
.collection-note { margin:2px 2px 18px 46px; color:var(--muted); font-size:11px; line-height:1.55; }
.collection-attribution { margin:-7px 2px 18px 46px; padding:8px 10px; border-radius:10px; background:#eee8f3; color:#655673; font-size:9px; line-height:1.5; }
.collection-group { margin-top:20px; }
.collection-group > .section-heading { display:none; }
.collection-shelf { width:100%; padding:14px 12px; display:grid; grid-template-columns:34px 1fr auto; align-items:center; gap:9px; border:1px solid #cddcec; border-radius:16px; background:#fff; color:var(--ink); text-align:left; }
.collection-shelf strong,.collection-shelf small { display:block; }
.collection-shelf strong { font-size:13px; }
.collection-shelf small { margin-top:3px; color:var(--muted); font-size:9px; }
.collection-group h3 { margin:0; font-size:14px; font-weight:700; }
.section-heading { display:flex; justify-content:space-between; align-items:center; padding:8px 3px 10px; }
.count { font-size:11px; background:#e4e7df; border-radius:18px; padding:6px 10px; }
.card-list { display:grid; gap:12px; }
.saved-card { display:grid; grid-template-columns:38px 1fr; gap:8px; background:var(--white); border:1px solid #ebe7ef; border-radius:22px; padding:16px 14px; box-shadow:0 8px 22px #493d6410; }
.saved-card > div { min-width:0; }
.saved-card a { overflow-wrap:anywhere; }
.saved-icon { width:30px; height:30px; border-radius:50%; background:var(--topic-color,var(--conversation)); display:grid; place-items:center; color:var(--topic-ink,var(--conversation-ink)); font-weight:900; }
.saved-card p { margin:2px 0 6px; font-size:14px; line-height:1.5; overflow-wrap:anywhere; }
.saved-card small { display:block; margin-top:6px; color:var(--muted); font-size:10px; line-height:1.5; }
.candidate-label { display:inline-block; padding:3px 7px; border-radius:10px; background:#f4ead6; color:#735d31; font-size:9px; font-weight:700; }
.intentional-label { display:block; width:max-content; margin-top:7px; padding:3px 7px; border-radius:9px; background:#dff4ea; color:#17644f; font-size:8px; font-weight:700; }
.source-kicker { margin:0 0 5px !important; color:#386f9b !important; font-weight:700; }
.thread-card { border-left:5px solid var(--topic-color,var(--conversation)); }
.card-actions { display:flex; gap:8px; margin-top:14px; }
.card-actions button { border:1px solid var(--line); background:transparent; padding:7px 9px; border-radius:10px; color:var(--deep); font-size:11px; }
.card-actions .primary { background:var(--deep); border-color:var(--deep); color:white; }
.empty { color:var(--muted); text-align:center; margin:50px 20px; font-size:13px; }
.offline-notice { position:absolute; left:14px; right:14px; bottom:126px; background:#634f45; color:white; font-size:11px; padding:10px 13px; border-radius:12px; z-index:4; }
.recovery-notice { position:absolute; top:82px; left:14px; right:14px; padding:14px; border:1px solid #c78367; border-radius:15px; background:#fff4ec; color:#563b31; z-index:5; box-shadow:0 10px 30px #50392f24; }
.recovery-notice strong { font-size:13px; }
.recovery-notice p { margin:6px 0 11px; font-size:11px; line-height:1.5; }
.recovery-notice div { display:flex; gap:7px; }
.recovery-notice button { border:1px solid #b77860; border-radius:9px; padding:7px 9px; background:white; color:#633f31; font-size:10px; }
.ai-suggestion { margin:18px 4px 4px; padding:12px; display:grid; grid-template-columns:30px 1fr; gap:9px; border:1px solid #ded5e8; border-radius:17px; background:#f6f1fa; color:#453b51; }
.ai-suggestion[hidden] { display:none; }
.ai-avatar { width:29px; height:29px; display:grid; place-items:center; border-radius:50%; background:#e6dced; color:#765c88; }
.ai-suggestion small { color:#77678a; font-size:9px; font-weight:700; }
.ai-suggestion p { margin:4px 0; font-size:12px; line-height:1.5; }
.ai-suggestion em { display:block; color:#8a8190; font-size:8px; font-style:normal; }
.ai-actions { display:flex; gap:7px; margin-top:9px; }
.ai-actions button { border:1px solid #d3c7dc; border-radius:10px; padding:6px 9px; background:white; color:#5f4c70; font-size:10px; }
.ai-actions button:first-child { background:#6b587b; color:white; }
.ai-consult { margin:0 13px 6px; padding:7px 12px; display:flex; align-items:center; justify-content:center; gap:8px; border:1px solid #ded5e8; border-radius:14px; background:#f7f2fa; color:#5c496a; }
.ai-consult > span:first-child { font-size:14px; }
.ai-consult strong,.ai-consult small { display:block; }
.ai-consult strong { font-size:11px; }
.ai-consult small { color:#8a8190; font-size:8px; }
.ai-consult:disabled { opacity:.55; cursor:default; }
.composer { display:flex; gap:8px; padding:9px 13px; border-top:1px solid var(--line); background:#fff; }
.composer[hidden] { display:none; }
.sticker-control { position:relative; display:flex; align-items:center; }
.sticker-button { width:38px; height:38px; border:1px solid var(--line); border-radius:50%; background:#fffdfa; color:var(--deep); font-size:17px; }
.sticker-menu { position:absolute; left:0; bottom:48px; width:158px; padding:8px; border:1px solid var(--line); border-radius:14px; background:#fffdfa; box-shadow:0 8px 25px #35433b28; z-index:8; }
.sticker-menu[hidden] { display:none; }
.sticker-menu button { width:100%; margin:2px 0; padding:8px; border:0; border-radius:9px; background:#eef2ea; color:var(--deep); font-size:12px; }
.sticker-menu small { display:block; margin-top:5px; color:var(--muted); font-size:8px; line-height:1.4; }
.composer textarea { flex:1; resize:none; max-height:90px; border:1px solid var(--line); background:white; border-radius:20px; padding:10px 14px; outline:none; }
.composer textarea:focus { border-color:var(--sage); }
.composer > button[type="submit"] { border:0; width:40px; border-radius:50%; background:var(--deep); color:white; font-size:22px; }
.bottom-nav { min-width:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); padding:8px 6px calc(7px + env(safe-area-inset-bottom)); border-top:1px solid var(--line); background:#fff; }
.bottom-nav-item { --topic-color:var(--conversation); --topic-ink:var(--conversation-ink); min-height:54px; position:relative; border:0; background:transparent; color:#373348; display:grid; place-items:center; align-content:center; gap:4px; }
.bottom-nav-item[data-destination="conversation"] { --topic-color:var(--conversation); --topic-ink:var(--conversation-ink); }
.bottom-nav-item[data-destination="place"] { --topic-color:var(--place); --topic-ink:var(--place-ink); }
.bottom-nav-item[data-destination="travel"] { --topic-color:var(--travel); --topic-ink:var(--travel-ink); }
.bottom-nav-item[data-destination="fun"] { --topic-color:var(--fun); --topic-ink:var(--fun-ink); }
.bottom-nav-item .nav-icon { width:30px; height:30px; display:grid; place-items:center; border-radius:50%; background:var(--topic-color); color:var(--topic-ink); font-size:15px; line-height:1; font-weight:900; transition:transform .16s; }
.bottom-nav-item small { font-size:9px; font-weight:700; }
.bottom-nav-item.active { color:var(--topic-ink); }
.bottom-nav-item.active .nav-icon { box-shadow:0 0 0 3px #fff,0 0 0 6px var(--topic-color); transform:translateY(-3px) scale(1.04); }
.bottom-nav-item.active::after { content:""; position:absolute; bottom:0; width:24px; height:4px; border-radius:3px; background:var(--topic-color); }
#collectionView[data-topic="place"] { --topic-color:var(--place); --topic-ink:var(--place-ink); }
#collectionView[data-topic="travel"] { --topic-color:var(--travel); --topic-ink:var(--travel-ink); }
#collectionView[data-topic="fun"] { --topic-color:var(--fun); --topic-ink:var(--fun-ink); }
#collectionView h2 { color:var(--topic-ink,var(--conversation-ink)); }
#collectionView .thread-card { border-left-color:var(--topic-color,var(--conversation)); }
#collectionView .source-kicker { color:var(--topic-ink,var(--conversation-ink)) !important; }
.thread-excerpt { margin:5px 0 !important; display:grid; grid-template-columns:25px 1fr; gap:7px; align-items:start; padding:8px 10px; border-left:3px solid var(--topic-color); background:#f8fafc; border-radius:0 10px 10px 0; }
.thread-excerpt.speaker-start { margin-top:9px !important; }
.thread-excerpt p { margin:0; }
.thread-excerpt b { display:block; margin-bottom:3px; color:#475467; font-size:9px; }
.thread-speaker-avatar { width:24px; height:24px; font-size:8px; }
dialog { border:0; border-radius:24px; width:min(88%,360px); padding:24px; color:var(--ink); }
dialog::backdrop { background:#27362f70; backdrop-filter:blur(3px); }
dialog h2 { margin-bottom:17px; }
dialog label { display:block; padding:12px 8px; border-top:1px solid #eee9e1; }
dialog label input { width:100%; margin-top:6px; padding:9px 10px; border:1px solid var(--line); border-radius:9px; }
.assist-disclaimer { padding:8px 10px; border-radius:9px; background:#eef5fc; color:var(--muted); font-size:10px; line-height:1.5; }
.assist-options { display:grid; gap:8px; }
.assist-options button { padding:11px 12px; border:1px solid #bfd2e6; border-radius:12px; background:#fff; color:#174c78; text-align:left; font-size:12px; font-weight:650; }
.dialog-copy,.dialog-status { font-size:11px; line-height:1.55; color:var(--muted); }
.dialog-status { padding:9px; border-radius:9px; background:#f4eee4; }
.security-list { list-style:none; padding:0; font-size:12px; line-height:2; }
.security-list .ready { color:#35714b; font-weight:700; }
.security-list .missing { color:#a15841; font-weight:700; }
.dialog-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:18px; }
.dialog-actions button { border:0; border-radius:12px; padding:10px 14px; }
#saveCategory { background:var(--deep); color:white; }
@media (min-width:600px) { .phone-shell { height:min(900px,calc(100dvh - 30px)); margin-top:15px; border-radius:32px; } }
.ai-consult[hidden] { display:none; }