.chat-message{border-radius:10px;padding:17px 20px;max-width:92%;margin-bottom:18px;overflow-wrap:anywhere}.from-user{margin-left:auto;background:#eaf0df}.from-assistant{background:#f8f9f4;border:1px solid #ebeee2;margin-right:auto}.chat-text{white-space:pre-wrap;font-size:14px}.chat-photo-label{display:block;font-size:11px;color:var(--muted);margin-bottom:8px}.chat-drafts{margin-top:18px;display:grid;gap:14px}.chat-draft{border:1px solid #d5dec9;border-radius:9px;padding:18px;background:white}.chat-draft h3{font-size:24px;margin-top:8px}.chat-draft p{font-size:12px;margin:10px 0}.chat-draft-meta{font-size:11px;color:var(--muted);margin:12px 0}.chat-suggestions{list-style:none;padding:0;margin:20px 0 0}.chat-suggestions li{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:14px;padding:15px 0;border-top:1px solid var(--line)}.chat-suggestions strong{font:20px/1.25 var(--serif)}.chat-suggestions p{font-size:12px;margin:6px 0}.chat-suggestions .text-button{padding:4px 0;font-size:11px;min-height:32px}.chat-suggestions .small{display:block;margin-top:6px}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(max-width:640px){.chat-message{max-width:97%;padding:15px}.chat-text{font-size:13px}.chat-suggestions li{grid-template-columns:1fr;gap:5px}}

@media(max-width:640px){.topbar nav{flex-wrap:wrap;row-gap:2px}}

.chat-incomplete{border-left:3px solid #b99a46;background:#faf0d5;color:#796123;padding:12px;font-size:12px;margin:14px 0 0}
.chat-pick-row{display:flex;gap:12px;align-items:flex-start;cursor:pointer;font-size:inherit;margin:0}.chat-pick-row input{margin-top:29px;flex:none;width:18px;height:18px}.chat-pick{display:flex;gap:8px;align-items:center;font-size:12px;margin:0 0 12px;cursor:pointer}.chat-pick input{width:16px;height:16px}
.chat-suggestion-thumb{flex:none;width:76px;height:76px;border-radius:8px;overflow:hidden;background:#e8eddd;display:flex;align-items:center;justify-content:center}.chat-suggestion-thumb img{width:100%;height:100%;object-fit:cover;display:block}.chat-suggestion-thumb>span{font-size:34px;color:#a0b180;line-height:1}.chat-suggestion-thumb.is-idea{background:#f3f5eb;border:1px dashed #c3ccb2}.chat-suggestion-meta{display:block;font-size:11px;color:var(--muted);margin-top:4px;font-weight:400}.chat-pick-row:has(input:checked) .chat-suggestion-thumb{outline:2px solid var(--green);outline-offset:2px}@media(max-width:640px){.chat-suggestion-thumb{width:60px;height:60px}.chat-pick-row input{margin-top:21px}.chat-suggestions li>.text-button,.chat-suggestions li>.small{margin-left:102px}}

/* Chat as one scrolling page with the composer docked at the bottom, like a messenger. */
.kitchen-chat{--chat-dock-bottom:0px;max-width:820px;margin:0 auto;min-height:calc(100dvh - 120px);display:flex;flex-direction:column}

.chat-tools{display:flex;justify-content:flex-end;padding-top:14px}.chat-tools .icon-button{width:40px;height:40px;color:var(--muted)}.chat-tools .icon-button:hover{color:#a64235}.chat-tools .icon-button svg{width:19px;height:19px}#chat-messages{flex:1;padding:8px 0 12px}
.chat-welcome{text-align:center;padding:40px 10px 20px}.chat-welcome-icon{font-size:44px;color:#8da269}.chat-welcome h2{font-size:32px;margin-top:8px}.chat-welcome p{font-size:13px;max-width:420px;margin:14px auto 0}
.chat-thinking{display:flex;align-items:center;gap:10px;font-size:13px;padding:6px 4px 14px;color:var(--muted)}
.chat-dock{position:sticky;bottom:var(--chat-dock-bottom);z-index:5;margin:0 -12px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:linear-gradient(to bottom,#f9f8f300,var(--paper) 18px)}
.chat-starters{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px 0 10px}.chat-starters::-webkit-scrollbar{display:none}.chat-starters button{flex:none;background:#eef1e6;color:var(--green);border:0;border-radius:999px;padding:9px 16px;font-size:13px;font-weight:550;min-height:40px;cursor:pointer}.chat-starters button:hover{background:#e2e8d4}
#chat-attachment:empty,#chat-error:empty{display:none}#chat-attachment{display:flex;align-items:center;gap:12px;margin-bottom:8px;border:1px solid var(--line);border-radius:12px;padding:8px;background:#fff}#chat-attachment img{width:48px;height:48px;object-fit:cover;border-radius:8px}#chat-attachment>span{flex:1;font-size:12px;overflow-wrap:anywhere;min-width:0}#chat-error{margin:0 0 8px}
.chat-input-row{display:flex;align-items:flex-end;gap:8px;background:#fff;border:1px solid #dfe4d6;border-radius:26px;padding:5px;box-shadow:0 6px 24px -12px #12271b40;transition:border-color .15s,box-shadow .15s}.chat-input-row:focus-within{border-color:#8ea36d;box-shadow:0 0 0 4px #8ea36d26}
.chat-input-row textarea{flex:1;min-width:0;margin:0;border:0;outline:none!important;resize:none;background:none;padding:10px 4px;font-size:15px;line-height:1.45;max-height:160px;min-height:0}
.chat-photo-button,.chat-send{flex:none;width:42px;height:42px;margin:0;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer}.chat-photo-button{color:var(--green)}.chat-photo-button:hover{background:#f0f3e8}.chat-photo-button svg,.chat-send svg{width:21px;height:21px}
.chat-send{border:0;background:var(--green);color:#fff;padding:0}.chat-send:disabled{background:#c9d2c0;cursor:default;opacity:1}.chat-send .button-spinner{border-color:#fff;border-right-color:transparent}
.chat-input-row:has(#chat-photo:focus-visible) .chat-photo-button{outline:2px solid #8da269;outline-offset:2px}

body:has(.kitchen-chat) footer{display:none}
@media(max-width:900px){.kitchen-chat{--chat-dock-bottom:calc(66px + env(safe-area-inset-bottom));min-height:calc(100dvh - 160px)}.chat-dock{padding-bottom:8px}
body.chat-typing #mobile-navigation{display:none}body.chat-typing .kitchen-chat{--chat-dock-bottom:0px}body.chat-typing .chat-dock{padding-bottom:calc(8px + env(safe-area-inset-bottom))}}
@media(max-width:640px){#chat-messages{padding-top:16px}.chat-welcome{padding:24px 6px 10px}.chat-welcome h2{font-size:27px}.chat-input-row textarea{font-size:16px}}
.from-user{border-radius:18px 18px 6px 18px;max-width:85%}.from-assistant{border-radius:18px 18px 18px 6px}
