/* Chat attachments share the existing quiet bubbles and cream composer. */
.crab-h5 .chat-view .chat-compose.has-image-tools { display:block; }
.crab-h5 .chat-compose-surface { min-width:0; width:100%; border:1px solid #C8C1B4; border-radius:20px; background:#FFFEFB; }
.crab-h5 .chat-compose-surface:has(textarea:focus-visible) { outline:2px solid #236CAF; outline-offset:2px; }
.crab-h5 .chat-view .chat-compose-surface :is(.chat-input-row,.event-group-input-row) { display:flex; align-items:flex-end; gap:6px; min-width:0; padding:6px; }
.crab-h5 .chat-view .chat-compose-surface textarea { min-height:44px; padding:11px 2px; border:0; border-radius:0; background:transparent; box-shadow:none; outline:none; }
.crab-h5 .chat-view .chat-compose-surface textarea:focus-visible { outline:none; }
.crab-h5 .chat-view .chat-compose-surface .primary-button { min-width:60px; min-height:44px; padding:10px 14px; border:0; border-radius:13px; box-shadow:none; }
.crab-h5 .chat-view .chat-compose-surface .primary-button:disabled { background:#F0EBE1; color:#827B70; box-shadow:none; }
.crab-h5 .chat-image-picker-slot { display:flex; flex:none; }
.crab-h5 .chat-image-picker { display:grid; place-items:center; flex:0 0 44px; width:44px; min-height:44px; padding:10px; border:0; border-radius:12px; background:transparent; color:#53616B; }
.crab-h5 .chat-image-picker svg { width:23px; height:23px; }
.crab-h5 .chat-image-picker:not(:disabled):hover { background:transparent; }
.crab-h5 .chat-image-picker:disabled { opacity:.5; }
.crab-h5 .chat-image-preview { display:flex; align-items:center; gap:12px; min-width:0; width:100%; margin:0; padding:10px 12px 2px; }
.crab-h5 .chat-image-attachment { position:relative; flex:none; width:72px; height:72px; padding-top:8px; }
.crab-h5 .chat-image-attachment > img { display:block; width:64px; height:64px; border:1px solid #201C221A; border-radius:10px; object-fit:cover; background:#F1F0EB; }
.crab-h5 .chat-image-remove { position:absolute; top:0; right:0; display:grid; justify-items:end; align-items:start; width:44px; height:44px; padding:0; border:0; border-radius:10px; background:transparent; color:#FFFEFB; }
.crab-h5 .chat-image-remove-mark { display:grid; place-items:center; width:24px; height:24px; border:2px solid #FFFEFB; border-radius:50%; background:#4B474D; }
.crab-h5 .chat-image-remove svg { width:14px; height:14px; }
.crab-h5 .chat-image-remove:not(:disabled):hover .chat-image-remove-mark { background:var(--ink); }
.crab-h5 .chat-image-remove:disabled { opacity:.5; }
.crab-h5 .chat-image-feedback { display:grid; gap:4px; min-width:0; }
.crab-h5 .chat-image-progress,.crab-h5 .chat-image-error { min-width:0; color:var(--ink-2); font:400 13px/1.6 var(--sans); overflow-wrap:anywhere; }
.crab-h5 .chat-image-error { color:#A04438; }
.crab-h5 .chat-bubble.has-image { width:228px; max-width:100%; padding:4px; border-radius:15px; }
.crab-h5 .chat-bubble.has-image > p { padding:7px 10px 9px; }
.crab-h5 .chat-image-open { display:block; width:220px; max-width:100%; min-height:44px; padding:0; overflow:hidden; border:0; border-radius:12px; background:#EAE8E1; cursor:zoom-in; }
.crab-h5 .chat-image-open > img { display:block; width:100%; height:176px; object-fit:cover; }
.crab-h5 .chat-image-open > img[hidden],.crab-h5 .chat-image-thumb-error[hidden] { display:none; }
.crab-h5 .chat-image-thumb-error { display:grid; align-content:center; gap:10px; min-height:176px; padding:16px; color:var(--ink-2); font:400 13px/1.7 var(--sans); }
.crab-h5 .chat-image-thumb-error > span { color:#365F7A; font-weight:700; }
.crab-h5 .chat-image-viewer { position:absolute; z-index:190; inset:0; display:flex; align-items:center; justify-content:center; padding:64px 18px 28px; background:#201C22ED; }
.crab-h5 .chat-image-dialog { display:flex; justify-content:center; align-items:center; min-width:0; width:100%; height:100%; }
.crab-h5 .chat-image-close { position:absolute; top:max(12px,var(--h5-safe-top)); right:16px; display:grid; place-items:center; width:44px; height:44px; padding:11px; border:1px solid #FFFEFB70; border-radius:50%; background:#FFFEFB; color:var(--ink); }
.crab-h5 .chat-image-close svg { width:22px; height:22px; }
.crab-h5 .chat-image-full { display:block; max-width:100%; max-height:100%; object-fit:contain; }
.crab-h5 .chat-image-full[hidden],.crab-h5 .chat-image-load-error[hidden] { display:none; }
.crab-h5 .chat-image-load-error { color:#FFFEFB; text-align:center; font:400 15px/1.7 var(--sans); }
.crab-h5 .chat-image-retry { min-height:44px; padding:10px 16px; border:1px solid #FFFEFB70; border-radius:10px; background:#FFFEFB; color:var(--ink); font:700 14px/1.5 var(--sans); }
.crab-h5 :is(.chat-image-picker,.chat-image-remove,.chat-image-open,.chat-image-close,.chat-image-retry):focus-visible { outline:3px solid #236CAF; outline-offset:3px; }
.crab-h5 .chat-image-close:focus-visible,.crab-h5 .chat-image-retry:focus-visible { outline-color:#FFCE66; }

/* One right-hand expansion control keeps the message field clear. */
.crab-h5 .chat-view .chat-compose { display:block; }
.crab-h5 .chat-compose-surface { border-color:transparent; border-radius:18px; background:#F1F0EB; }
.crab-h5 .chat-view .chat-compose-surface textarea { padding-inline:10px; }
.crab-h5 .chat-tools-toggle { display:grid; place-items:center; flex:none; width:44px; min-height:44px; padding:7px; border:0; border-radius:12px; background:transparent; color:#3C3E42; }
.crab-h5 .chat-tools-toggle > svg { width:30px; height:30px; }
.crab-h5 .chat-tools-toggle[aria-expanded="true"] { background:#E2E6E5; color:#2D596D; }
.crab-h5 .chat-tools-toggle[aria-expanded="true"] svg { transform:rotate(45deg); }
.crab-h5 .chat-tools-toggle:disabled { opacity:.5; }
.crab-h5 .chat-compose:has(textarea:placeholder-shown):not(:has(.chat-image-preview,.chat-location-preview,.chat-location-status)) [type="submit"] { display:none; }
.crab-h5 .chat-tools-panel { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; padding:22px 2px 4px; }
.crab-h5 .chat-tools-panel[hidden] { display:none; }
.crab-h5 .chat-tools-panel .chat-tool-tile { display:flex; flex-direction:column; align-items:center; align-self:start; justify-content:flex-start; gap:9px; width:100%; min-width:0; min-height:100px; margin:0; padding:0 2px; border:0; border-radius:14px; background:transparent; color:#606369; font:400 13px/1.5 var(--sans); text-align:center; overflow-wrap:anywhere; }
.crab-h5 .chat-tool-icon { display:grid; place-items:center; flex:none; width:64px; height:64px; max-width:100%; border:1px solid #201C2208; border-radius:18px; background:#FFFEFB; color:#3D4145; }
.crab-h5 .chat-tool-icon svg { width:28px; height:28px; }
.crab-h5 .chat-tool-tile:hover .chat-tool-icon { background:#E9F0F2; }
.crab-h5 .chat-tool-tile:active .chat-tool-icon { background:#DFE9ED; }
.crab-h5 .chat-tool-tile:disabled { opacity:.5; }
/* One compact message surface; the whole location row opens its destination. */
.crab-h5 .chat-view .chat-row .chat-bubble.has-location { width:220px; max-width:100%; padding:0; border:0; border-radius:16px; background:#DEECF2; box-shadow:none; }
.crab-h5 .chat-view .chat-row .chat-bubble.has-location:not(.has-image):not(:has(> p)) { width:fit-content; min-width:min(168px,100%); }
.crab-h5 .chat-view .chat-row.is-theirs .chat-bubble.has-location { background:#F1F0EB; }
.crab-h5 .chat-location { display:flex; align-items:center; gap:10px; width:100%; max-width:100%; min-height:60px; padding:12px 14px; border:0; border-radius:16px; color:var(--ink); text-decoration:none; }
.crab-h5 .chat-location-pin { display:grid; place-items:center; flex:none; width:26px; height:28px; color:#A85B48; }
.crab-h5 .chat-location-pin svg { width:22px; height:22px; }
.crab-h5 .chat-location-copy { min-width:0; color:var(--ink); font:400 14px/1.5 var(--sans); overflow-wrap:anywhere; }
.crab-h5 .chat-location-copy strong { font-weight:600; }
.crab-h5 .chat-location:hover { background:#201C2205; }
.crab-h5 .chat-view .chat-row .chat-bubble.has-location > p { margin:0; padding:0 14px 12px; border:0; border-radius:0; background:transparent; }
.crab-h5 .chat-bubble.has-location .chat-image-open { width:100%; margin-bottom:7px; }
.crab-h5 .chat-location-preview { display:flex; align-items:center; gap:10px; padding:12px 10px 4px 16px; min-width:0; }
.crab-h5 .chat-location-preview > svg { flex:none; width:25px; height:25px; color:#BA5340; }
.crab-h5 .chat-location-preview > span { display:grid; flex:1; gap:2px; min-width:0; color:#676E73; font:400 12px/1.5 var(--sans); overflow-wrap:anywhere; }
.crab-h5 .chat-location-preview strong { color:var(--ink); font-size:14px; font-weight:700; }
.crab-h5 .chat-location-preview button { display:grid; place-items:center; flex:none; width:44px; min-height:44px; padding:12px; border:0; border-radius:10px; background:transparent; color:var(--ink-2); }
.crab-h5 .chat-location-preview button svg { width:20px; height:20px; }
.crab-h5 .chat-location-status { margin:0; padding:12px 14px 2px; color:var(--ink-2); font:400 13px/1.5 var(--sans); }
.crab-h5 .chat-meta .chat-recall { min-width:44px; min-height:44px; padding:8px 4px; border:0; border-radius:8px; background:transparent; color:#647782; font:500 12px/1.5 var(--sans); }
.crab-h5 .chat-recalled { padding:8px 0; color:var(--ink-2); font:400 13px/1.6 var(--sans); }
.crab-h5 :is(.chat-location,.chat-tools-toggle,.chat-tool-tile,.chat-location-preview button,.chat-recall):focus-visible { outline:3px solid #236CAF; outline-offset:2px; }
@media (max-width:359px) {
  .crab-h5 .chat-view .chat-compose-surface :is(.chat-input-row,.event-group-input-row) { gap:2px; padding:4px; }
  .crab-h5 .chat-view .chat-compose-surface .primary-button { min-width:52px; padding-inline:8px; }
  .crab-h5 .chat-tools-panel { gap:8px; }
  .crab-h5 .chat-tool-icon { width:60px; height:60px; }
}