:root {
  color-scheme: light;
  --canvas: #f6f7f3;
  --surface: #fff;
  --ink: #242d29;
  --muted: #586352;
  --line: #e3e7de;
  --accent: #345c48;
  --accent-soft: #eaf0e7;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--canvas);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; line-height: 1.5; overflow-wrap: anywhere; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
button, a, input { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:disabled { cursor: wait; }
a, button { touch-action: manipulation; }
:focus-visible { outline: 3px solid #7c9b65; outline-offset: 5px; }
h1, h2, h3, p { margin: 0; }
.icon { flex-shrink: 0; width: 1.25rem; height: 1.25rem; }
.muted { color: var(--muted); }
.skip-link { position: fixed; left: 1rem; top: 0; transform: translateY(-150%); z-index: 10; padding: .75rem; background: white; }
.skip-link:focus { top: .75rem; transform: none; }
.app-shell { display: flex; min-height: 100dvh; }
.sidebar { width: 14.5rem; flex-shrink: 0; position: fixed; inset: 0 auto 0 0; overflow-y: auto; padding: 2.4375rem 1.375rem 1.5rem; display: flex; flex-direction: column; border-right: 1px solid var(--line); background: #fcfcf9; }
.brand { display: flex; align-items: center; min-height: 2.75rem; gap: .6875rem; font-size: 1.6875rem; font-weight: 680; letter-spacing: -.08em; padding: 0 .625rem; }
.brand-mark { display: grid; place-items: center; color: var(--accent); }
.brand-mark .icon { width: 1.625rem; height: 1.625rem; }
.brand-period { color: #536b43; margin-left: -.625rem; }
.workspace-label { margin: 3.875rem .875rem 1.125rem; color: var(--muted); font-size: .75rem; font-weight: 650; letter-spacing: .12em; }
nav { display: grid; gap: .375rem; }
.nav-link { display: flex; align-items: center; gap: .8125rem; min-height: 2.875rem; padding: .5rem .875rem; font-size: .875rem; color: var(--muted); border-radius: .4375rem; transition: background .15s, color .15s; }
.nav-link:hover { background: #f0f3eb; color: var(--ink); }
.nav-link.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.nav-group { display: grid; gap: .375rem; min-width: 0; }
.nav-child { margin-inline-start: 1.25rem; border-inline-start: 1px solid var(--line); }
.nav-link .icon { width: 1.125rem; height: 1.125rem; }
.nav-dot { width: 5px; height: 5px; background: var(--accent); border-radius: 50%; margin-left: auto; }
.sidebar-note { margin: auto .75rem 1.875rem; padding-top: 5.625rem; }
.small-line { display: block; width: 25px; height: 2px; background: #aebc9f; margin-bottom: 17px; }
.sidebar-note p { font-size: .875rem; line-height: 1.8; color: #5c675c; }
.sidebar-note > span:last-child { display: block; font-size: .75rem; color: var(--muted); margin-top: .75rem; }
.sidebar-footer { border-top: 1px solid var(--line); padding: 1.375rem .75rem 0; color: var(--muted); font-size: .75rem; }
.main-shell { margin-left: 14.5rem; width: calc(100% - 14.5rem); min-width: 0; }
.topbar { min-height: 5.25rem; padding: .75rem 3rem; border-bottom: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .75rem 1.5rem; }
.breadcrumb { display: flex; flex-wrap: wrap; gap: 1.125rem; align-items: center; color: var(--muted); font-size: .875rem; }
.breadcrumb > span { color: #c5cabf; }
.breadcrumb strong { color: #4e594e; font-weight: 500; }
.account { display: flex; align-items: center; gap: .6875rem; font-size: .875rem; min-width: 0; max-width: 100%; }
.avatar { display: grid; place-items: center; flex-shrink: 0; width: 1.9375rem; height: 1.9375rem; border-radius: 50%; background: #e2e9da; color: var(--accent); font-size: .875rem; font-weight: 650; }
.account-name { min-width: 0; max-width: 10rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-link { display: flex; align-items: center; gap: .6875rem; min-width: 2.75rem; min-height: 2.75rem; border-radius: .375rem; }
.avatar { overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile-panel { max-width: 44rem; padding: clamp(.75rem, 4vw, 2rem); border: 1px solid var(--line); border-radius: .75rem; background: var(--surface); }
.profile-panel h2 { font-size: 1.375rem; font-weight: 550; }
.profile-picture { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; margin-block: 1.75rem; }
.profile-picture .avatar { width: 5rem; height: 5rem; font-size: 2rem; }
.picture-controls { display: flex; flex-wrap: wrap; gap: .75rem; min-width: 0; flex: 1 1 12rem; }
.picture-controls p { flex-basis: 100%; font-size: .875rem; }
.button.picture-picker { position: relative; cursor: pointer; min-height: calc(2.75rem + 2px); }
.picture-picker input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.picture-picker:focus-within { outline: 3px solid #7c9b65; outline-offset: 3px; }
.profile-field { display: grid; min-width: 0; gap: .5rem; margin-bottom: 1.5rem; }
.profile-field label { font-weight: 600; }
.profile-field input, .profile-field textarea { min-width: 0; width: 100%; min-height: 2.75rem; padding: .75rem; border: 1px solid #8a9584; border-radius: .375rem; background: white; color: var(--ink); }
.profile-field textarea { resize: vertical; }
.profile-field p { font-size: .875rem; }
.profile-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.text-button { background: none; border: 0; min-width: 2.75rem; min-height: 2.75rem; padding: .5625rem; color: var(--muted); font-size: .875rem; }
.text-button:hover { color: var(--ink); }
main { max-width: 84.375rem; margin: 0 auto; padding: 2.9375rem 3rem 0; }
.page-heading { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1.5rem; margin-bottom: 2.125rem; }
.eyebrow { color: var(--muted); font-size: .75rem; font-weight: 650; letter-spacing: .15em; line-height: 1.6; }
h1 { font-size: 2.375rem; font-weight: 550; letter-spacing: -.04em; margin: .625rem 0 .75rem; line-height: 1.15; }
.subtitle { color: var(--muted); font-size: .9375rem; line-height: 1.7; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: .625rem; min-width: 2.75rem; min-height: 2.75rem; max-width: 100%; padding: .625rem 1.125rem; border-radius: .375rem; border: 1px solid var(--line); background: white; font-size: .875rem; font-weight: 550; transition: background .15s, border-color .15s; }
.button .icon { width: 1rem; height: 1rem; }
.button:hover { background: #edf1e9; border-color: #c5d0bd; }
.button-primary { background: var(--accent); color: white; border-color: var(--accent); }
.button-primary:hover { background: #244735; border-color: #244735; }
.button-small { padding-inline: .8125rem; }
.intro-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: #e9eee3; border: 1px solid #e0e6d7; border-radius: .75rem; overflow: hidden; min-height: 20.625rem; }
.overview-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: 1.125rem; margin-top: 1.5rem; }
.overview-card { display: grid; gap: .75rem; min-width: 0; padding: clamp(.75rem, 4vw, 1.5rem); background: var(--surface); border: 1px solid var(--line); border-radius: .625rem; }
.overview-card:hover { background: var(--accent-soft); }
.overview-card h2 { font-size: 1.375rem; }
.overview-card p { color: var(--muted); }
.overview-card > span { color: var(--accent); font-weight: 600; }
.intro-copy { position: relative; z-index: 1; min-width: 0; padding: 2.1875rem 2.25rem; }
.pill { display: inline-flex; align-items: center; gap: .4375rem; border: 1px solid #cad5be; border-radius: 1.25rem; font-size: .75rem; letter-spacing: .1em; color: #4f6345; padding: .4375rem .625rem; font-weight: 600; }
.pill-dot { width: 4px; height: 4px; background: #779363; border-radius: 50%; }
.intro-copy h2 { font-size: 2.875rem; font-weight: 500; line-height: 1.1; letter-spacing: -.04em; margin: 1.375rem 0 1rem; color: #304733; }
.intro-copy p { max-width: 19.6875rem; font-size: .9375rem; line-height: 1.9; color: #53634a; }
.inline-link { display: inline-flex; align-items: center; min-height: 2.75rem; gap: .75rem; margin-top: 1.3125rem; font-size: .875rem; font-weight: 600; color: #3f5b39; }
.inline-link .icon { width: 1rem; height: 1rem; transition: transform .15s; }
.inline-link:hover .icon { transform: translateX(4px); }
/* Decorative still life: fixed pixels preserve its geometry; no text/layout relies on it. */
.collection-art { position: relative; min-height: 330px; overflow: hidden; }
.art-caption { position: absolute; top: 31px; right: 30px; color: #53634a; font-size: .75rem; letter-spacing: .1em; }
.art-orbit { position: absolute; width: 260px; height: 260px; border-radius: 50%; background: #dce5d1; left: 50%; top: 49%; transform: translate(-50%, -50%); }
.art-lamp { position: absolute; width: 130px; height: 192px; left: 14%; bottom: 68px; }
.lamp-shade { position: absolute; top: 0; width: 130px; height: 86px; background: #a4b18c; clip-path: polygon(29% 0, 71% 0, 100% 100%, 0 100%); border-radius: 4px; }
.lamp-stem { position: absolute; top: 84px; bottom: 7px; width: 6px; left: 62px; background: #687d59; }
.lamp-base { position: absolute; bottom: 0; left: 33px; width: 64px; height: 9px; border-radius: 50% 50% 3px 3px; background: #687d59; }
.art-books { position: absolute; bottom: 68px; left: 43%; width: 100px; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.art-books span { width: 89px; height: 15px; border-radius: 2px; background: #ece3d0; border-left: 7px solid #cabd9e; border-right: 2px solid #cabd9e; }
.art-books span:nth-child(2) { width: 103px; background: #b2be9d; border-color: #82946b; height: 20px; }
.art-books span:nth-child(3) { width: 110px; background: #f3eddf; border-color: #d0c7b1; height: 16px; }
.art-plant { position: absolute; right: 10%; bottom: 68px; width: 80px; height: 155px; }
.plant-pot { position: absolute; bottom: 0; width: 65px; left: 8px; height: 62px; border-radius: 3px 3px 17px 17px; background: #ba9376; clip-path: polygon(0 0,100% 0,88% 100%,12% 100%); }
.plant-stem { position: absolute; left: 39px; top: 21px; bottom: 45px; width: 3px; background: #66834f; }
.leaf { position: absolute; width: 27px; height: 48px; background: #789265; border-radius: 0 100% 0 100%; }
.leaf-one { left: 14px; top: 31px; transform: rotate(-12deg); }
.leaf-two { left: 40px; top: 4px; transform: rotate(62deg); background: #688355; }
.leaf-three { left: 40px; top: 50px; transform: rotate(74deg); background: #8ba375; }
.art-shelf { position: absolute; height: 7px; bottom: 61px; left: 7%; right: 5%; border-radius: 3px; background: #c5cdb8; }
.art-tag { position: absolute; bottom: 22px; inset-inline: 5%; display: inline-flex; justify-content: center; align-items: center; gap: .4375rem; color: #53634a; font-size: .75rem; text-align: center; }
.art-tag .icon { width: 15px; height: 15px; }
.photo-section { margin-top: 2.3125rem; scroll-margin-top: 1.5rem; }
.section-heading { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1.25rem; margin-bottom: 1.3125rem; }
.section-heading h2 { font-size: 1.375rem; font-weight: 550; letter-spacing: -.025em; margin-top: .5rem; }
.section-caption { font-size: .8125rem; color: var(--muted); padding-bottom: .1875rem; }
.upload-panel { background: var(--surface); border: 1px solid var(--line); border-radius: .625rem; overflow: hidden; }
.upload-context { min-width: 0; padding: 1.8125rem 2rem; }
.feature-icon { color: #6c825c; display: inline-flex; padding: .5rem; background: #f2f5ed; border-radius: .4375rem; }
.upload-context h3 { font-size: 1.3125rem; font-weight: 550; letter-spacing: -.025em; line-height: 1.25; margin: .9375rem 0 .625rem; }
.upload-context > p { font-size: .9375rem; line-height: 1.8; color: var(--muted); max-width: 18.75rem; }
.upload-note { display: flex; align-items: start; gap: .4375rem; margin-top: 1.25rem; font-size: .8125rem; line-height: 1.6; color: var(--muted); max-width: 17.8125rem; }
.upload-note .icon { width: .8125rem; height: .8125rem; margin-top: .125rem; }
.upload-content { min-width: 0; padding: 1.4375rem; display: flex; }
.upload-picker, .upload-placeholder { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; width: 100%; min-height: 15.4375rem; border: 1px dashed #d6ddcd; border-radius: .4375rem; background: #fafbf7; padding: 1.375rem; text-align: center; gap: .5625rem; }
.upload-picker:focus-within { outline: 3px solid #7c9b65; outline-offset: 3px; }
.upload-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; width: 100%; min-width: 0; }
.button.upload-action { position: relative; max-width: 100%; min-height: calc(2.75rem + 2px); }
.upload-action:focus-within { outline: 3px solid #7c9b65; outline-offset: 3px; }
.upload-action input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; z-index: 1; }
.upload-picker.uploading { opacity: .7; }
.upload-picker input:disabled { cursor: wait; }
.upload-symbol { display: grid; place-items: center; width: 2.9375rem; height: 2.9375rem; border-radius: 50%; background: #edf1e7; color: #6d835d; margin-bottom: .4375rem; }
.upload-symbol .icon { width: 1.375rem; height: 1.375rem; }
.upload-picker strong, .upload-placeholder strong { font-size: 1rem; font-weight: 550; }
.upload-picker > span:not([class]), .upload-placeholder > span:not([class]) { font-size: .875rem; color: var(--muted); line-height: 1.7; }
.upload-content .button { margin-top: .75rem; }
.camera-modal { width: min(40rem, calc(100% - 1rem)); }
.camera-modal video { display: block; width: 100%; max-height: 55vh; object-fit: contain; background: #17201a; }
.camera-capture { margin-top: 1rem; }
.feedback { display: flex; flex-wrap: wrap; align-items: center; gap: .625rem; margin-top: .875rem; padding: .875rem 1.125rem; border: 1px solid #d0dfc8; background: #edf5e7; border-radius: .375rem; color: #3e6034; font-size: .875rem; }
.feedback > span { min-width: 0; flex: 1 1 10rem; }
.feedback.error { background: #fff1ec; border-color: #ead1c6; color: #954b35; }
.profile-feedback:not(.error) { animation: feedback-dismiss 5s ease forwards; }
.profile-actions .button[aria-pressed="true"] { background: var(--accent); color: white; }
.profile-panel + .profile-panel { margin-top: 1.5rem; }
#language-title { margin-bottom: .75rem; }
@keyframes feedback-dismiss { 0%, 85% { opacity: 1; } 100% { opacity: 0; } }
.feedback .icon { width: 1.0625rem; height: 1.0625rem; }
.gallery-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.125rem; font-size: .875rem; line-height: 1.6; }
.gallery-message { display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: 2.25rem 1.25rem; background: var(--surface); border: 1px solid var(--line); border-radius: .625rem; text-align: center; font-size: .9375rem; color: var(--muted); }
.gallery-message .inline-link { margin-top: 0; }
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: 1.125rem; align-items: start; }
.item-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr)); gap: 1.125rem; align-items: start; }
.item-card { min-width: 0; border: 1px solid var(--line); border-radius: .625rem; overflow: hidden; background: var(--surface); }
.item-open { display: block; width: 100%; padding: 0; border: 0; background: transparent; color: var(--ink); text-align: left; }
.item-open:hover { background: #f2f6ed; }
.item-open:focus-visible { outline-offset: -4px; }
.item-thumbnails { display: grid; grid-template-columns: 1fr; grid-auto-rows: minmax(0, 1fr); height: 18rem; gap: .25rem; background: #e9ede5; }
.item-thumbnails:has(.crop-image ~ .crop-image) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.crop-link { display: block; min-width: 0; min-height: 2.75rem; width: 100%; padding: 0; border: 0; background: transparent; text-align: left; }
.item-thumbnails .crop-link { height: 100%; }
.item-thumbnails > dialog { grid-area: auto; }
.crop-frame { touch-action: none; overflow: hidden; }
.crop-outline { position: absolute; min-width: 2.75rem; min-height: 2.75rem; border: 2px dashed var(--box-color); background: #ffffff66; color: var(--box-color); text-align: left; vertical-align: top; }
.crop-outline[hidden] { display: none; }
.editable-box { position: absolute; border: 2px solid var(--box-color); box-shadow: 0 0 0 1px white; background: #ffffff1a; }
.editable-box[hidden] { display: none; }
.crop-handle { position: absolute; min-width: 2.75rem; min-height: 2.75rem; padding: 0; border: 0; border-radius: .375rem; background: transparent; color: white; touch-action: none; }
.crop-handle::after { content: ""; position: absolute; width: .625rem; height: .625rem; border: 2px solid white; background: var(--box-color); border-radius: .125rem; pointer-events: none; }
.crop-move { background: var(--box-color); border: 2px solid white; }
.crop-move::after { display: none; }
.crop-nw::after { left: 0; top: 0; } .crop-ne::after { right: 0; top: 0; }
.crop-sw::after { left: 0; bottom: 0; } .crop-se::after { right: 0; bottom: 0; }
.crop-move { left: 50%; top: 50%; transform: translate(-50%, -50%); cursor: move; }
.crop-nw { left: 0; top: 0; cursor: nwse-resize; }
.crop-ne { right: 0; top: 0; cursor: nesw-resize; }
.crop-sw { left: 0; bottom: 0; cursor: nesw-resize; }
.crop-se { right: 0; bottom: 0; cursor: nwse-resize; }
.detection-choice { width: 100%; display: flex; align-items: start; gap: .625rem; min-height: 2.75rem; padding: .5rem; border: 2px solid transparent; background: transparent; color: var(--ink); text-align: left; overflow-wrap: anywhere; }
.detection-choice > span:last-child { min-width: 0; }
.detection-list .detection-entry { display: block; min-width: 0; border: 2px solid transparent; }
.detection-entry.selected { border-color: var(--box-color); background: #f4f6f0; }
.detection-listing { min-width: 0; overflow-wrap: anywhere; }
.detection-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: 0 .5rem .5rem; }
.detection-actions > .button { max-width: 100%; }
.detection-listing > .button { max-width: 100%; }
.detection-choice .detection-number { background: var(--box-color); }
.detection-choice[aria-pressed="false"] .detection-description { display: none; }
.crop-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1rem; }
.item-thumbnails > .muted { align-self: center; padding: 1rem; text-align: center; }
.crop-image { position: relative; display: flex; justify-content: center; align-items: center; align-self: start; min-width: 0; height: min(24rem, 60dvh); background: #f4f6f0; border-radius: .375rem; overflow: hidden; }
.crop-quality { position: absolute; right: .375rem; bottom: .375rem; max-width: calc(100% - .75rem); padding: .25em .5em; border-radius: .25rem; background: #173d30; color: #fff; font-size: .8125rem; line-height: 1.4; overflow-wrap: anywhere; }
.item-price { margin-block: .75rem; overflow-wrap: anywhere; }
.item-prices { display: grid; gap: .375rem; overflow-wrap: anywhere; }
.public-item-details { min-width: 0; padding: clamp(.5rem, 4vw, 1.5rem); }
.linked-item { display: contents; }
.linked-item > .item-open { display: none; }
.public-item-details h3 { margin-block: 1rem .5rem; font-size: 1.125rem; }
.public-description { white-space: pre-wrap; }
.seller-contact-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .5rem 1rem; margin-top: .75rem; border-top: 1px solid var(--line); }
.item-owner { flex: 1 1 10rem; min-width: 0; }
.item-owner h3 { margin-block: .5rem .25rem; }
.item-owner .contact-field { margin-top: .25rem; }
.item-owner .contact-field p { margin-block: 0; }
.item-owner .contact-email, .item-owner .contact-phone { padding-block: 0; }
.public-item-actions { display: flex; justify-content: flex-end; margin-inline-start: auto; }
.full-image-content { padding: clamp(.5rem, 2vw, 1rem); }
.full-image-content img { display: block; max-width: 100%; height: auto; margin-inline: auto; }
.seller-identity { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.seller-identity .avatar { flex-shrink: 0; }
.seller-identity strong { min-width: 0; overflow-wrap: anywhere; }
.seller-profile-link { min-height: 2.75rem; color: var(--accent); text-decoration: underline; text-underline-offset: .15em; }
.profile-view { overflow-wrap: anywhere; }
.profile-view-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.profile-view-heading .seller-identity { flex: 1 1 12rem; flex-wrap: wrap; }
.profile-view-heading .seller-identity h2 { flex: 1 1 10rem; }
.profile-view h2 { min-width: 0; margin: 0; }
.profile-view h3 { margin-block: 1rem .5rem; }
.contact-location { position: relative; overflow-wrap: anywhere; }
.location-label { display: flex; align-items: center; gap: .25rem; }
.location-info { display: inline-flex; align-items: center; justify-content: center; min-width: 2.75rem; min-height: 2.75rem; padding: .25rem; border: 0; border-radius: .375rem; background: transparent; color: var(--accent); font: inherit; cursor: pointer; }
.location-tooltip { position: absolute; z-index: 1; top: 2.75rem; inset-inline: 0; padding: .75rem; border: 1px solid var(--line); border-radius: .375rem; background: var(--surface); color: var(--ink); font-size: .875rem; font-weight: 400; box-shadow: 0 .25rem .75rem #17251e26; }
.contact-field { display: grid; min-width: 0; margin-top: .5rem; }
.contact-field > span { font-weight: 600; }
.contact-email, .contact-phone { display: flex; align-items: center; min-width: 0; min-height: 2.75rem; padding-block: .25rem; color: var(--accent); overflow-wrap: anywhere; text-decoration: underline; text-underline-offset: .15em; }
.crop-image img { display: block; width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: contain; }
.crop-image img[hidden] { display: none; }
.item-thumbnails .crop-image { width: 100%; height: 100%; min-height: 0; border-radius: 0; }
.item-thumbnails .crop-image img { max-height: 100%; }
.crop-error { padding: .375rem; color: #954b35; font-size: .75rem; text-align: center; }
.item-summary { display: grid; gap: .75rem; padding: 1.125rem; }
.item-summary > strong { font-size: 1.125rem; font-weight: 600; }
/* Reserve three lines even for short/empty summaries; details retain the full text. */
.item-description { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; min-height: 4.8em; max-height: 4.8em; overflow: hidden; color: var(--muted); font-size: .875rem; line-height: 1.6; white-space: pre-wrap; }
.item-card-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; color: var(--accent); font-size: .8125rem; }
.item-crops, .item-editor { min-width: 0; padding: clamp(.5rem, 4vw, 1.5rem); }
.item-crops { background: #e9ede5; }
.item-crops h3 { font-size: 1.125rem; font-weight: 550; }
.item-crop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 8rem), 1fr)); gap: .75rem; margin-top: 1rem; }
.item-crops > .item-crop-grid:first-child { margin-top: 0; }
.item-crop-grid .crop-image { height: auto; }
.item-crop-grid .crop-image img { height: auto; }
.item-crop { display: flex; flex-direction: column; gap: .5rem; min-width: 0; overflow-wrap: anywhere; }
.crop-visibility { width: 100%; white-space: normal; }
.crop-hidden > .crop-link { outline: 2px dashed var(--muted); outline-offset: -2px; }
.crop-hidden .crop-image { filter: grayscale(1); opacity: .45; }
.item-editor fieldset { display: grid; gap: 1.25rem; padding: 0; margin: 1rem 0 0; border: 0; min-width: 0; }
.item-editor label { display: grid; gap: .5rem; font-size: .875rem; font-weight: 600; min-width: 0; }
.item-editor input, .item-editor textarea { width: 100%; min-width: 0; min-height: 2.75rem; border: 1px solid #85917c; border-radius: .375rem; padding: .625rem; background: white; color: var(--ink); }
.item-editor textarea { resize: vertical; }
.photo-card { --detection-0: #255bd2; --detection-1: #a12985; --detection-2: #16764c; --detection-3: #a84d12; --detection-4: #6c42c1; --detection-5: #087987; min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.photo-preview { display: block; background: #e9ede5; text-align: center; }
.photo-open { display: block; position: relative; width: 100%; border: 0; padding: 0; background: #e9ede5; color: var(--ink); }
.photo-open:hover { background: #dce4d5; }
.photo-open:focus-visible { outline-offset: -4px; }
.photo-open .photo-preview { display: flex; justify-content: center; align-items: center; min-height: 15rem; background: transparent; }
.photo-open .photo-frame img { max-height: 15rem; }
.photo-count { position: absolute; bottom: .625rem; right: .625rem; padding: .3125rem .5rem; border-radius: .25rem; background: #fffffff0; font-size: .75rem; color: var(--accent); }
/* Keep the overlay's coordinate system exactly the size of the uncropped image. */
.photo-frame { position: relative; display: inline-block; max-width: 100%; vertical-align: middle; }
.photo-frame img { display: block; width: auto; max-width: 100%; height: auto; image-orientation: none; }
.detection-box { position: absolute; border: 2px solid var(--box-color); box-shadow: 0 0 0 1px #ffffffa0; pointer-events: none; }
.detection-box > span { position: absolute; top: 0; left: 0; min-width: 1.25rem; padding: .125rem .25rem; background: var(--box-color); color: white; font-size: .8125rem; font-weight: 700; line-height: 1.3; text-align: center; }
.photo-failed { display: none; }
.image-error { display: block; padding: 2.5rem 1.5rem; color: #954b35; font-size: .875rem; }
.photo-details { padding: 1.125rem; }
.photo-details h3 { margin-top: 1.5rem; font-size: 1.125rem; font-weight: 550; }
.detail-hint { margin-top: .5rem; color: var(--muted); font-size: .875rem; line-height: 1.6; }
.photo-modal { width: min(68.75rem, calc(100% - 2rem)); max-width: none; max-height: calc(100dvh - 2rem); overflow-y: auto; padding: 0; border: 1px solid var(--line); border-radius: .75rem; color: var(--ink); background: var(--surface); }
.photo-modal::backdrop { background: #17251ecc; }
body:has(.photo-modal[open]) { overflow: hidden; }
.modal-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--line); }
.modal-header h2 { font-size: 1.375rem; font-weight: 550; margin-top: .3125rem; }
.modal-body { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
@media (min-width: 43.751em) { .public-item-modal .modal-body { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); } }
.modal-body > .photo-preview { display: flex; justify-content: center; align-items: center; min-width: 0; padding: 1rem; }
.modal-body .photo-frame img { max-height: 70dvh; }
.modal-body .photo-details { min-width: 0; padding: 1.5rem; }
.crop-editor { --detection-0: #255bd2; --detection-1: #a12985; --detection-2: #16764c; --detection-3: #a84d12; --detection-4: #6c42c1; --detection-5: #087987; align-items: start; }
.crop-editor > .photo-preview { flex-direction: column; align-items: center; justify-content: flex-start; gap: .625rem; }
.crop-editor .photo-details h3 { margin-top: 0; }
.crop-date { align-self: flex-start; text-align: left; }
.crop-editor .detection-list { max-height: 40dvh; overflow-y: auto; overscroll-behavior: contain; gap: .25rem; padding: .1875rem; scrollbar-gutter: stable; }
@media (min-width: 43.751em) {
  /* Let the list take the space left after the header and sidebar actions. */
  .photo-modal[open]:has(> .crop-editor) { display: grid; grid-template-rows: auto minmax(0, 1fr); height: calc(100dvh - 2rem); }
  .crop-editor { min-height: 0; overflow-y: auto; grid-template-rows: minmax(0, 1fr); }
  .crop-editor > .photo-details { align-self: stretch; display: flex; flex-direction: column; min-height: 0; overflow-y: auto; }
  .crop-editor .detection-list { flex: 1; min-height: 2.75rem; max-height: none; align-content: start; }
}
@media (max-width: 43.75em) { .modal-body { grid-template-columns: 1fr; } .modal-body .photo-frame img { max-height: 50dvh; } .modal-header { padding: 1rem; } .modal-body .photo-details { padding: 1.25rem; } }
.photo-meta { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem; color: var(--muted); font-size: .75rem; }
.photo-meta strong { color: var(--accent); font-weight: 600; }
.detection-list { display: grid; gap: .8125rem; list-style: none; margin: 1.125rem 0 0; padding: 0; }
.detection-list li { display: flex; gap: .625rem; align-items: start; font-size: .875rem; line-height: 1.6; }
.detection-list li > span:last-child { min-width: 0; }
.detection-number { display: grid; place-items: center; flex-shrink: 0; min-width: 1.375rem; min-height: 1.375rem; border-radius: .25rem; color: white; font-size: .75rem; font-weight: 650; }
.detection-list strong { font-weight: 600; }
.detection-description { display: block; color: var(--muted); font-size: .875rem; overflow-wrap: anywhere; }
.no-detections { margin-top: 1.125rem; font-size: .875rem; line-height: 1.7; color: var(--muted); }
.gallery-pagination { display: flex; flex-wrap: nowrap; align-items: center; justify-content: center; gap: .25rem; margin-top: 1.375rem; color: var(--muted); font-size: .875rem; }
.gallery-pagination > [aria-current] { white-space: nowrap; font-size: .75rem; }
/* Allow enlarged-text arrows to narrow inside dialogs, retaining 44px targets. */
.pagination-arrow { flex: 0 1 2.75rem; min-width: 44px; padding: .25rem; width: 2.75rem; height: 2.75rem; font-size: 1.25rem; }
.gallery-pagination button:disabled { opacity: .45; cursor: default; }
.page-footer { border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.25rem; margin-top: 2.4375rem; padding: 1.375rem 0 1.5625rem; font-size: .75rem; color: var(--muted); }
.page-footer > span:first-child { font-weight: 600; color: var(--muted); letter-spacing: -.025em; font-size: .875rem; }
/* em breakpoints also respond to the browser's default font size. */
@media (min-width: 93.75em) { main { padding-top: 3.75rem; } .intro-panel { min-height: 22.8125rem; } .intro-copy { padding: 2.625rem; } }
@media (max-width: 68.75em) { .sidebar { width: 12.1875rem; padding-inline: 1rem; } .main-shell { margin-left: 12.1875rem; width: calc(100% - 12.1875rem); } main { padding: 2rem 1.75rem 0; } .topbar { padding-inline: 1.75rem; } .intro-copy { padding: 1.75rem; } .art-lamp { left: 3%; } .art-plant { right: 0; } .upload-context { padding: 1.625rem; } .section-caption { display: none; } }
@media (max-width: 50em) {
  .app-shell { flex-direction: column; }
  .sidebar { display: none; }
  .main-shell { margin: 0; width: 100%; }
  .topbar { min-height: 4.125rem; padding-inline: 1.5rem; }
  main { padding: 2rem 1.5rem 0; }
  .intro-copy h2 { font-size: 2.25rem; }
  .collection-art { min-height: 330px; }
}
@media (max-width: 35em) {
  .brand { font-size: 1.3125rem; gap: .4375rem; }
  .brand-period { margin-left: -.4375rem; }
  .nav-link { padding-inline: .5rem; }
  .topbar { padding-inline: clamp(.75rem, 4vw, 1.25rem); min-height: 3.75rem; }
  .breadcrumb { gap: .625rem; }
  .account { gap: .375rem; }
  .account-name { display: none; }
  /* Keep nested gutters small on narrow screens, including with enlarged text. */
  main { padding: 1.75rem clamp(.5rem, 4vw, 1rem) 0; }
  .page-heading { margin-bottom: 1.5rem; }
  h1 { font-size: 1.875rem; }
  .subtitle { max-width: 18.75rem; }
  .intro-panel { grid-template-columns: 1fr; }
  .intro-copy { padding: clamp(.5rem, 4vw, 1.5rem); }
  .intro-copy h2 { font-size: 2.5rem; }
  .collection-art { min-height: 245px; margin-top: -10px; transform: none; }
  .art-orbit { width: 220px; height: 220px; }
  .art-caption { display: none; }
  .art-lamp { left: 12%; height: 170px; bottom: 52px; }
  .art-books { bottom: 52px; }
  .art-plant { right: 8%; bottom: 52px; height: 145px; }
  .art-shelf { bottom: 45px; }
  .art-tag { bottom: 13px; }
  .photo-section { margin-top: 1.75rem; }
  .section-heading h2 { font-size: 1.3125rem; }
  .upload-panel { grid-template-columns: 1fr; }
  .upload-context { padding: clamp(.5rem, 4vw, 1.5rem); padding-bottom: 0; }
  .upload-context h3 br { display: none; }
  .upload-context h3 { font-size: 1.25rem; }
  .upload-note { margin-top: .8125rem; }
  .upload-content { padding: clamp(.5rem, 4vw, 1.25rem); }
  .upload-picker, .upload-placeholder { padding: clamp(.5rem, 3vw, 1.375rem); }
  .gallery-message { padding-inline: clamp(.5rem, 4vw, 1.25rem); }
  .modal-header, .modal-body .photo-details { padding: clamp(.5rem, 4vw, 1.25rem); }
  .page-footer { margin-top: 1.75rem; align-items: center; gap: .75rem; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
.photo-removal { display: flex; flex-direction: column; align-items: flex-end; margin-top: .75rem; overflow-wrap: anywhere; }
.button.button-danger { background: #b42318; border-color: #b42318; color: #fff; }
.button.button-danger:hover { background: #8f1c13; border-color: #8f1c13; }
.item-actions { padding: 1rem; min-width: 0; overflow-wrap: anywhere; }
.item-action-buttons { display: flex; flex-wrap: wrap; gap: .5rem; }
.item-action-buttons .button { white-space: normal; max-width: 100%; }
.item-delete-confirmation { width: min(28rem, calc(100% - 2rem)); padding: clamp(.75rem, 4vw, 1.5rem); }
.item-delete-confirmation p { margin-block: 1rem; }
.item-delete-confirmation .item-action-buttons { justify-content: flex-end; }
.item-modal-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: .5rem; border-top: 1px solid var(--line); padding: clamp(.5rem, 4vw, 1rem); }
.item-modal-actions > .item-actions { grid-column: 2; grid-row: 1; }
.item-modal-actions > .combine-control, .item-modal-actions > .combine-control:has(.item-search) { display: contents; }
.item-modal-actions > .combine-control > .button { grid-column: 1; grid-row: 1; justify-self: start; }
.item-modal-actions .combine-panel { grid-column: 1 / -1; grid-row: 2; min-width: 0; }
.item-modal-actions > .item-actions, .item-modal-actions > .combine-control { padding: 0; }
.item-modal-actions > .combine-control > .button { margin-block: 0; }
.item-editor .listing-visibility, .listing-visibility { display: flex; flex-direction: row; align-items: center; gap: .25rem; cursor: pointer; }
.listing-visibility input { appearance: none; position: relative; width: 2.75rem; height: 2.75rem; min-height: 2.75rem; padding: 0; border: 0; background: transparent; margin: 0; flex: 0 0 auto; cursor: pointer; }
.listing-visibility input::before { content: ""; position: absolute; inset: .75rem; border: 1px solid #85917c; border-radius: .1875rem; background: white; }
.listing-visibility input:checked::before { background: var(--accent); border-color: var(--accent); }
.listing-visibility input:checked::after { content: ""; position: absolute; left: 1.0625rem; top: .875rem; width: .375rem; height: .625rem; border: solid white; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.listing-visibility input:disabled { opacity: .6; cursor: wait; }
.item-editor .item-actions { padding: 0; }
.combine-control { padding: clamp(.25rem, 2vw, .75rem); min-width: 0; overflow-wrap: anywhere; }
.combine-options { display: grid; gap: .5rem; margin-block: .75rem; }
.combine-option { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; min-height: 2.75rem; cursor: pointer; }
.combine-option input { flex: 0 0 auto; width: 2.75rem; height: 2.75rem; margin: 0; }
.combine-option span { flex: 1 1 8em; min-width: 0; overflow-wrap: anywhere; }
.combine-control > .button { margin-block: .5rem; max-width: 100%; white-space: normal; }
.combine-control:has(.item-search) { flex: 1 1 100%; width: 100%; }
.combine-panel { scroll-margin-block-start: .75rem; }
.combine-commit { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-top: 1rem; }
.combine-commit > .button { margin-left: auto; }
.combine-commit .combine-option { flex: 1 1 14em; }
.combine-stock { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; }
.combine-stock input { width: 6em; min-height: 2.75rem; padding: .5rem; font: inherit; border: 1px solid #85917c; border-radius: .375rem; }
.item-search { position: relative; min-width: 0; margin-block: 0 1.5rem; }
.combine-panel > .item-search { margin-block: 1rem; }
.item-search input { width: 100%; min-width: 0; min-height: 2.75rem; padding: .625rem 3rem .625rem .625rem; font: inherit; border: 1px solid #85917c; border-radius: .375rem; color: var(--ink); background: white; }
.item-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.item-search-clear { position: absolute; inset-inline-end: 0; top: 0; bottom: 0; width: 2.75rem; min-height: 2.75rem; padding: 0; border: 0; border-radius: .375rem; background: transparent; color: var(--muted); font: inherit; font-size: 1.25rem; cursor: pointer; }
.item-search-clear[hidden] { display: none; }
.combine-options { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.combine-candidate { display: flex; align-items: center; gap: .5rem; min-width: 0; min-height: 2.75rem; padding: .5rem; border: 1px solid var(--line); border-radius: .5rem; background: var(--surface); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.combine-candidate[aria-checked="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 3px var(--accent); }
.combine-candidate-text > strong { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.combine-preview { flex: 0 1 5rem; width: 5rem; min-width: 0; }
.combine-preview .crop-image { width: 100%; height: 5rem; }
.combine-candidate-text { flex: 1 1 9em; display: grid; gap: .25rem; min-width: 0; overflow-wrap: anywhere; }
.combine-description { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: .875rem; }
/* Conversation content reflows even at enlarged text sizes on narrow phones. */
.chat-unread { display: inline-flex; align-items: center; justify-content: center; padding: .15em .55em; border-radius: 2em; background: #315b46; color: #fff; font-weight: 700; width: fit-content; overflow-wrap: anywhere; }
.chat-notification-region { position: fixed; z-index: 20; inset-inline: .75rem; bottom: .75rem; pointer-events: none; }
.chat-notification { pointer-events: auto; max-width: 35rem; margin-inline-start: auto; padding: 1rem; border: 1px solid #315b46; border-radius: .75rem; background: #fff; color: #20372b; box-shadow: 0 .25rem 1rem #0002; display: flex; flex-wrap: wrap; gap: .75rem; max-height: 60dvh; overflow: auto; }
.chat-notification p { flex: 1 1 100%; margin: 0; overflow-wrap: anywhere; }
.chat-notification p span { display: block; }
.chat-listing { display: grid; gap: .5rem; padding: 1rem; border: 1px solid #a9bbae; border-radius: .5rem; overflow-wrap: anywhere; }
.chat-listing a { white-space: normal; overflow-wrap: anywhere; }
.chat-layout { --chat-list-height: clamp(8rem, calc(100dvh - 32rem), 22rem); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 1.5rem; align-items: start; }
.chat-heading { gap: .5rem; margin-bottom: 1rem; }
.chat-heading h1 { margin-block: 0; }
.chat-picker h2, .chat-thread h2 { margin: 0 0 1rem; line-height: 1.3; }
.chat-thread { border-inline-start: 1px solid #a9bbae; padding-inline-start: 1.5rem; }
.chat-conversations, .chat-history { height: var(--chat-list-height); overflow-y: auto; scrollbar-gutter: stable; box-sizing: border-box; padding: .25rem; overscroll-behavior: contain; }
.chat-conversations { display: flex; flex-flow: column nowrap; align-items: stretch; align-self: start; margin: 0; width: 100%; }
.chat-sound-controls { display: flex; flex-wrap: wrap; gap: .5rem; }
.chat-sound-toggle { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; cursor: pointer; }
.chat-sound-toggle input { width: 2.75rem; height: 2.75rem; margin: 0; accent-color: #315b46; cursor: pointer; }
.chat-sound-controls .button { min-height: 2.75rem; padding-block: .25rem; }
.chat-message-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .25rem 1rem; }
.chat-message-heading small { margin-inline-start: auto; text-align: end; }
.chat-sender { display: inline-flex; align-items: center; gap: .5rem; min-width: 0; max-width: 100%; }
.chat-sender strong { overflow-wrap: anywhere; min-width: 0; }
.chat-sender .avatar { flex-shrink: 0; width: 2rem; height: 2rem; }
.chat-conversation { flex: 0 0 auto; }
.chat-layout > *, .chat-thread, .chat-composer { min-width: 0; }
.chat-conversation { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: .5rem; padding: 1rem; border: 1px solid var(--border, #ccc); border-radius: .5rem; margin-bottom: .5rem; overflow-wrap: anywhere; }
.chat-conversation strong { min-width: 0; }
.chat-conversation .chat-unread { flex-shrink: 0; }
.chat-conversation span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.chat-conversation:nth-child(odd) { background: #f6f8f5; }
.chat-conversation:nth-child(even) { background: #e9eee7; }
.chat-conversation.active { background: #d8e7d9; color: #203e2d; border-color: #315b46; outline: 2px solid #315b46; box-shadow: inset .3rem 0 #315b46; }
.chat-messages { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 1rem; }
.chat-messages li { padding: 1rem; border: 1px solid var(--border, #ccc); border-radius: .75rem; max-width: 100%; overflow-wrap: anywhere; }
.chat-messages li.own { border-inline-start: .25rem solid #37634b; }
.chat-messages p { white-space: pre-wrap; margin-block: .5rem; }
.chat-composer { display: grid; grid-template-columns: minmax(2.75rem, 1fr) auto; align-items: stretch; gap: .75rem; margin-block-start: 1rem; }
.chat-composer > .button { align-self: stretch; }
.chat-composer > [role="alert"] { grid-column: 1 / -1; }
.chat-composer textarea { width: 100%; box-sizing: border-box; font: inherit; padding: .5rem; resize: vertical; min-height: 3em; }
.chat-history-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
/* Native dialog supplies focus trapping, Escape and focus restoration. */
.mobile-header, .chat-back, .chat-send-mobile { display: none; }
.mobile-drawer { padding: 0; border: 0; margin: 0 0 0 auto; width: min(24rem, 100%); max-width: 100%; height: 100dvh; max-height: 100dvh; background: var(--surface); color: var(--ink); overflow-y: auto; }
.mobile-drawer::backdrop { background: #17251ecc; }
.mobile-drawer-content { padding: clamp(.75rem, 4vw, 1.5rem); padding-bottom: max(1.5rem, env(safe-area-inset-bottom)); }
.mobile-drawer-heading { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.mobile-drawer nav { display: grid; gap: .375rem; margin: 0; width: 100%; }
.mobile-drawer .account { flex-wrap: wrap; border-top: 1px solid var(--line); margin-top: 1rem; padding-top: 1rem; }
.mobile-drawer .account-name { display: inline; max-width: none; white-space: normal; overflow-wrap: anywhere; }
.mobile-drawer .profile-link { flex: 1 1 10rem; }
body:has(.mobile-drawer[open]) { overflow: hidden; }
.chat-thread-heading h2 { min-width: 0; }
.chat-composer textarea { max-height: 8em; overflow-y: auto; }
@media (max-width: 50em) {
  .mobile-header { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .5rem max(.75rem, env(safe-area-inset-right)) .5rem max(.75rem, env(safe-area-inset-left)); border-bottom: 1px solid var(--line); background: #fcfcf9; }
  .mobile-header .brand { font-size: 1.3125rem; letter-spacing: -.06em; padding: 0; min-width: 2.75rem; min-height: 2.75rem; white-space: nowrap; }
  .mobile-menu-button { flex-shrink: 0; padding-inline: .75rem; }
  .mobile-menu-button .chat-unread { font-size: .75rem; }
  .topbar { display: none; }
  .chat-send-mobile { display: inline; }
  .chat-send-desktop { display: none; }
  .chat-layout { display: block; }
  .chat-picker h2 { display: none; }
  .chat-conversations { height: auto; overflow: visible; }
  .chat-thread { border: 0; padding: 0; }
  .conversation-page .chat-picker, .conversation-page .chat-heading, .messages-page .page-footer { display: none; }
  /* Only the history scrolls in a thread. The composer stays in normal grid
     flow so neither messages nor errors can disappear underneath it. */
  .conversation-page { position: fixed; inset-inline: 0; top: var(--visual-top, 0px); height: var(--visual-height, 100dvh); min-height: 0; overflow: hidden; }
  .conversation-page .mobile-header { flex: 0 0 auto; }
  .conversation-page .main-shell { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  .conversation-page main { flex: 1; min-height: 0; width: 100%; margin: 0; padding: 0; display: flex; flex-direction: column; }
  .conversation-page .chat-layout { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: stretch; }
  .chat-thread { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  .chat-thread-heading { flex: 0 0 auto; display: flex; align-items: center; gap: .75rem; padding: .5rem .75rem; border-bottom: 1px solid var(--line); }
  .chat-thread-heading h2 { font-size: 1rem; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .chat-back { display: inline-flex; flex: 0 0 auto; max-width: 55%; font-size: .875rem; padding: .375rem .5rem; }
  .chat-history { flex: 1 1 0; min-height: 0; height: auto; padding: .5rem clamp(.5rem, 3vw, .75rem); }
  .chat-composer { flex: 0 0 auto; margin: 0; gap: .5rem; padding: .5rem max(.5rem, env(safe-area-inset-right)) max(.5rem, env(safe-area-inset-bottom)) max(.5rem, env(safe-area-inset-left)); border-top: 1px solid var(--line); background: var(--surface); grid-template-columns: minmax(2.75rem, 1fr) minmax(0, auto); align-items: stretch; max-height: 45%; overflow-y: auto; }
  .chat-composer textarea { min-height: 2.75rem; max-height: min(8em, 20dvh); resize: none; border: 1px solid #85917c; border-radius: .375rem; }
  .chat-composer .button { padding-inline: .75rem; }
  .chat-composer [role="alert"] { grid-column: 1 / -1; }
  .chat-thread > [role="alert"] { flex-shrink: 0; max-height: 20%; overflow-y: auto; padding-inline: .5rem; }
  /* Reserve space for notifications instead of covering Back or the composer. */
  .conversation-page .chat-notification-region { position: static; order: 3; flex: 0 1 auto; min-height: 0; max-height: 30%; overflow-y: auto; }
  .conversation-page .chat-notification { max-height: none; padding: .5rem; gap: .5rem; }
}
@media (max-width: 35em) {
  .mobile-menu-button { gap: .375rem; padding-inline: .5rem; }
  .mobile-menu-label { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .chat-back-label { display: none; }
}
@media (max-width: 50em) and (max-height: 26em) {
  .conversation-page .mobile-header { padding-block: .125rem; }
  .chat-thread-heading { padding-block: .125rem; }
  .chat-composer { max-height: 45%; padding-block: .125rem; }
  .chat-back-label { display: none; }
  .chat-thread-heading h2 { -webkit-line-clamp: 1; }
  .chat-history { padding-block: .125rem; }
}