@font-face { font-family: 'Loki Roboto'; src: url('./fonts/roboto-regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Loki Roboto'; src: url('./fonts/roboto-bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Loki Japanese'; src: url('./fonts/japanese-regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Loki Japanese'; src: url('./fonts/japanese-bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }
:root {
  color-scheme: dark;
  font-family: 'Loki Roboto', Roboto, 'Loki Japanese', 'Noto Sans JP', sans-serif;
  font-size: clamp(14px, 4.62427746vw, 24px);
  color: #ece0ce;
  background: #120d08;
  font-synthesis: none;
  -webkit-text-size-adjust: 100%;
  --list-bg: #120d08;
  --list-header: #1f1910;
  --chat-bg: #191208;
  --chat-surface: #241f18;
  --muted: #b9ad9a;
}
* { box-sizing: border-box; }
body { margin: 0; }
button, input, textarea { font: inherit; }
button { border: 0; padding: 0; background: none; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid #e6bd7c; outline-offset: 3px; }
button:disabled { opacity: .4; cursor: default; }
svg { width: 1.5rem; height: 1.5rem; flex: none; }
[hidden] { display: none !important; }
#app { width: 100%; max-width: 520px; min-height: 100dvh; margin-inline: auto; background: var(--list-header); }
.topbar { height: calc(3.0625rem + env(safe-area-inset-top)); padding: env(safe-area-inset-top) .4375rem 0 .6875rem; display: flex; align-items: center; flex: none; gap: .3125rem; background: var(--list-header); z-index: 2; }
.list-topbar { position: sticky; top: 0; gap: .25rem; }
.list-topbar #search-button { width: 2rem; }
.brand { display: flex; align-items: baseline; gap: .3125rem; flex: 1; margin: 0; font-size: .875rem; font-weight: 400; white-space: nowrap; }
.google-wordmark { font-family: Arial, sans-serif; font-size: .9375rem; letter-spacing: -.046875rem; font-weight: 500; color: #faf7f1; }
.icon-button { width: 2.4375rem; height: 2.625rem; display: grid; place-items: center; flex: none; border-radius: 50%; }
.icon-button svg { width: 1.125rem; height: 1.125rem; }
.icon-button:active, .conversation:active { background: #ffffff0b; }
.profile { width: 2rem; height: 2.625rem; }
.profile img { width: 2rem; height: 2rem; border-radius: 50%; }
.search { width: 0; min-width: 0; flex: 1; border: 0; border-radius: 1.5rem; padding: .625rem .75rem; font-size: .875rem; background: #332b1f; color: inherit; }
.conversation-list { min-height: calc(100dvh - 3.0625rem - env(safe-area-inset-top)); border-radius: 1.5rem 1.5rem 0 0; background: var(--list-bg); padding: .375rem 0 3.5rem; }
.conversation { width: 100%; height: 3.5625rem; display: flex; align-items: center; gap: .6875rem; padding: 0 1.0625rem 0 .6875rem; text-align: left; }
.conversation.unread { height: 4.375rem; }
.avatar { width: 2.375rem; height: 2.375rem; border-radius: 50%; flex: none; display: grid; place-items: center; color: #2c2a23; }
.avatar svg { width: 1.8125rem; height: 1.8125rem; }
.avatar-google { border-radius: .8125rem; }
.avatar-google img { width: 100%; height: 100%; object-fit: contain; }
.conversation-content { min-width: 0; flex: 1; display: block; }
.conversation-line { display: flex; align-items: center; gap: .375rem; }
.conversation-name { flex: 1; min-width: 0; display: flex; align-items: center; font-size: .8125rem; line-height: 1.125rem; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.verified { width: .6875rem; height: .6875rem; margin-left: .125rem; color: #e6b979; }
.conversation time { flex: none; font-size: .625rem; line-height: 1rem; color: var(--muted); white-space: nowrap; }
.preview-line { align-items: flex-start; margin-top: .125rem; gap: 1.25rem; }
.preview { min-width: 0; flex: 1; font-size: .75rem; line-height: 1.0625rem; color: var(--muted); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.unread .conversation-name, .unread .preview, .unread time { font-weight: 700; color: #eee2d0; }
.unread .preview { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: pre-line; }
.unread-count { min-width: .8125rem; height: .8125rem; padding-inline: .125rem; margin-top: -.125rem; display: grid; place-items: center; background: #e6b979; color: #493516; font-size: .5625rem; font-weight: 400; border-radius: 1rem; }
.floating-actions { position: fixed; z-index: 3; right: max(1.0625rem, calc((100vw - 520px) / 2 + 1.0625rem)); bottom: calc(1rem + env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: flex-end; gap: .25rem; }
.gemini-button { display: grid; place-items: center; width: 2.5rem; height: 2.5625rem; border-radius: .75rem; background: #332b1f; box-shadow: 0 .125rem .1875rem #0004; }
.gemini-button svg { width: 1.125rem; height: 1.125rem; }
.new-chat-button { height: 2.5rem; display: flex; align-items: center; gap: .5rem; padding: 0 .75rem; border-radius: .8125rem; background: #6a4d20; color: #f6dfb8; font-size: .75rem; line-height: 1; letter-spacing: .03125rem; box-shadow: 0 .125rem .25rem #0004; }
.new-chat-button svg { width: 1rem; height: 1rem; }
.chat { height: 100dvh; display: flex; flex-direction: column; background: var(--chat-bg); }
.chat .topbar { padding-left: .125rem; padding-right: .25rem; gap: 0; background: var(--chat-surface); }
.chat .avatar { width: 1.8125rem; height: 1.8125rem; margin: 0 .5rem 0 .125rem; }
.chat .avatar svg { width: 1.4375rem; height: 1.4375rem; }
.chat-title { margin: 0; flex: 1; font-size: .875rem; line-height: 1.25rem; font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat .phone-button { width: 2rem; }
.chat .more-button { width: 2.125rem; position: relative; }
.more-button::after { content: ''; position: absolute; width: .25rem; height: .25rem; border-radius: 50%; background: #f4b6b9; top: .6875rem; right: .5rem; }
.messages { flex: 1; min-height: 0; overflow-y: auto; padding: 0 .375rem .125rem; overscroll-behavior: contain; scrollbar-width: none; border-top-right-radius: 1.125rem; background: var(--chat-bg); }
.messages::-webkit-scrollbar { display: none; }
.date-label { height: .9375rem; margin: 1.5rem 0 .625rem; text-align: center; font-size: .625rem; line-height: .9375rem; color: #cfbfa7; }
.bubble { width: fit-content; max-width: 77%; padding: .359375rem .6875rem; margin: .0625rem 0; border-radius: 1rem; background: var(--chat-surface); color: #e9e0d2; font-size: .8125rem; line-height: 1.21875rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.bubble.group-start { border-bottom-left-radius: .3125rem; }
.bubble.group-end { border-top-left-radius: .3125rem; }
.bubble.group-middle { border-top-left-radius: .3125rem; border-bottom-left-radius: .3125rem; }
.bubble.sent { margin-left: auto; background: #6a4d20; color: #f6dfb8; }
.bubble.sent.group-start { border-bottom-left-radius: 1rem; border-bottom-right-radius: .3125rem; }
.bubble.sent.group-end { border-top-left-radius: 1rem; border-top-right-radius: .3125rem; }
.bubble.sent.group-middle { border-radius: 1rem .3125rem .3125rem 1rem; }
.message-link { color: inherit; text-decoration: underline; text-underline-offset: .125rem; }
.message-photo { display: block; max-width: 100%; max-height: 16rem; border-radius: .625rem; }
.message-time { margin: .1875rem .6875rem 0; font-size: .5625rem; line-height: .8125rem; color: #d2c5af; }
.message-time.sent { text-align: right; }
.composer { flex: none; display: flex; align-items: flex-end; gap: .375rem; min-height: 3.375rem; padding: .625rem .375rem calc(.25rem + env(safe-area-inset-bottom)); background: var(--chat-bg); }
.input-wrap { flex: 1; min-width: 0; min-height: 2.5rem; display: flex; align-items: flex-end; border-radius: 1.5rem; background: var(--chat-surface); padding-inline: .0625rem; }
.input-wrap .icon-button { height: 2.5rem; width: 2.125rem; color: #d9c9af; }
.input-wrap .icon-button svg { width: 1.125rem; height: 1.125rem; }
.input-wrap textarea { width: 0; flex: 1; min-width: 0; resize: none; max-height: 7.5rem; height: 2.5rem; min-height: 2.5rem; padding: .65625rem 0 .59375rem; border: 0; margin: 0; background: transparent; color: #e9e0d2; font-size: .8125rem; line-height: 1.25rem; outline-offset: -.125rem; }
.input-wrap textarea::placeholder { color: #d7c7ae; letter-spacing: .01875rem; }
.voice-button, .send { width: 2.5rem; height: 2.5rem; background: #693b23; color: #f7dbc8; }
.voice-button svg { width: 1.125rem; height: 1.125rem; }
.send svg { width: 1.125rem; height: 1.125rem; }
.empty { margin: 0; padding: 2.5rem 1.5rem; color: var(--muted); text-align: center; font-size: .875rem; line-height: 1.8; }
dialog { width: min(90%, 400px); border: 0; border-radius: 1.5rem; padding: 1.5rem; background: #2b251c; color: #ece0ce; font-size: .875rem; }
dialog::backdrop { background: #0009; }
dialog h2 { margin: 0 0 1rem; font-size: 1.125rem; font-weight: 400; }
dialog p { color: #c9bba6; font-size: .8125rem; line-height: 1.8; }
dialog label { display: block; margin-bottom: .625rem; }
dialog input { width: 100%; border: 1px solid #8c7655; border-radius: .625rem; padding: .75rem; background: var(--list-bg); color: inherit; }
dialog button { min-height: 2.75rem; padding: .625rem .75rem; color: #e8c787; }
.dialog-actions { display: flex; justify-content: flex-end; gap: .5rem; }
.emoji-options { display: grid; grid-template-columns: repeat(5, 1fr); }
.emoji-options button { padding: .5rem; font-size: 1.5rem; }
#toast { position: fixed; z-index: 5; bottom: calc(5.75rem + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); max-width: min(90vw, 480px); width: max-content; padding: .75rem 1rem; border-radius: .75rem; background: #eee3d3; color: #282219; font-size: .8125rem; }
#toast:empty { display: none; }
@media (min-width: 600px) { #app { border-inline: 1px solid #332b1f; } }