/* The open conversation owns its viewport; other screens keep the app shell. */
.chat-view .chat-panel {
  display:flex;
  flex-direction:column;
  width:100%;
  max-width:740px;
  height:min(740px, calc(100dvh - 232px));
  min-height:360px;
  min-width:0;
  margin-inline:auto;
  padding:0;
  overflow:hidden;
  background:var(--surface);
}

.chat-dialog-header {
  display:grid;
  grid-template-columns:44px 40px minmax(0, 1fr) auto;
  align-items:center;
  gap:8px;
  flex:0 0 auto;
  min-width:0;
  min-height:58px;
  padding:7px 16px;
  background:var(--surface);
}
.chat-dialog-header .chat-back {
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  padding:0;
  border:1px solid var(--line);
  border-radius:50%;
  color:var(--ink);
  background:var(--surface-subtle);
}
.chat-back svg { width:24px; height:24px; }
.chat-dialog-header .avatar { width:40px; height:40px; font-size:18px; }
.chat-dialog-header .chat-peer-name {
  min-width:0;
  margin:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--ink);
  font-size:20px;
  font-weight:650;
  line-height:1.3;
  letter-spacing:0;
}
.chat-view .chat-peer-name > button {
  min-height:44px;
  padding:0 12px;
  border:1px solid var(--line);
  border-radius:22px;
  background:var(--surface-subtle);
}
.chat-dialog-header .chat-bell { display:none; }
.chat-demo-switch { margin:0 16px 10px; font-size:12px; }
.chat-view .chat-order-link {
  display:flex;
  flex:0 0 auto;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  min-width:0;
  min-height:44px;
  max-width:calc(100% - 32px);
  margin:0 16px 8px;
  padding:7px 12px;
  border:1px solid var(--control-border);
  border-radius:var(--ui-corner);
  background:var(--surface-subtle);
  color:var(--ink);
  text-align:left;
  font-size:15px;
  line-height:1.35;
}
.chat-order-link > span {
  flex:1 1 auto;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.chat-order-link > svg { flex:0 0 auto; width:20px; height:20px; }
.chat-order-link > svg:last-child { margin-left:auto; }

.chat-view .chat-panel .chat-window {
  display:block;
  flex:1 1 0;
  min-width:0;
  min-height:0;
  max-height:none;
  margin:0;
  padding:10px 16px;
  overflow-x:hidden;
  overflow-y:auto;
  scrollbar-gutter:stable;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  border:0;
  border-top:1px solid var(--line);
  border-radius:0;
  background:var(--bg);
  background-image:
    radial-gradient(circle at 18px 18px, transparent 5px, color-mix(in srgb,var(--accent) 10%,transparent) 5px 6px, transparent 6px),
    radial-gradient(circle at 44px 48px, color-mix(in srgb,var(--accent) 12%,transparent) 0 1px, transparent 2px),
    linear-gradient(150deg,var(--bg),var(--soft));
  background-size:62px 68px, 62px 68px, auto;
}
.chat-history {
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap:4px;
  min-width:0;
  min-height:100%;
}
.chat-history > * { flex:0 0 auto; }
.chat-message-row {
  display:flex;
  align-items:center;
  min-width:0;
  touch-action:pan-y pinch-zoom;
}
.chat-message-row.self { flex-direction:row-reverse; }
.chat-message-row:not(.self) + .chat-message-row:not(.self),
.chat-message-row.self + .chat-message-row.self { margin-top:-2px; }
.chat-view .chat-day {
  align-self:center;
  margin:6px 0;
  padding:4px 10px;
  border-radius:999px;
  background:var(--soft);
  color:var(--muted);
  font-size:12px;
  line-height:1.35;
}
.chat-view .bubble,
.chat-view .bubble.self {
  position:relative;
  width:fit-content;
  min-width:0;
  max-width:84%;
  padding:6px 10px;
  border:0;
  border-radius:16px 16px 16px 5px;
  color:var(--ink);
  font-size:16px;
  line-height:1.35;
  box-shadow:none;
  overflow-wrap:anywhere;
}
.chat-view .bubble { background:var(--surface); }
.chat-view .bubble.self { background:var(--chat-self); border-radius:16px 16px 5px 16px; }
.chat-message-row:not(.self):has(+ .chat-message-row:not(.self)) .bubble { border-bottom-left-radius:16px; }
.chat-message-row.self:has(+ .chat-message-row.self) .bubble { border-bottom-right-radius:16px; }
.chat-view .bubble.with-media { max-width:min(84%, 320px); }
.chat-view .bubble:has(.chat-media[data-kind="photo"]) { width:min(84%, 280px); }
.chat-view .chat-message-content { display:flow-root; }
.chat-view .chat-message-text { display:inline; margin:0; }
.chat-view .bubble .chat-message-time {
  display:inline-block;
  float:right;
  margin:.42em 0 0 7px;
  color:var(--muted);
  font-size:11px;
  line-height:1.25;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.chat-view .bubble.with-media .chat-message-time {
  display:block;
  float:none;
  margin:3px 0 0;
  text-align:right;
}
.chat-view .bubble .chat-message-author.sr-only { margin:0; }
.chat-view .chat-media { margin-top:0; }
.chat-view .chat-media + .chat-message-content { margin-top:5px; }
.chat-view .chat-media[data-kind="voice"] .voice-play {
  position:relative;
  background:none;
  color:var(--on-accent);
}
.chat-view .chat-media[data-kind="voice"] .voice-play::before {
  content:"";
  position:absolute;
  inset:8px;
  border-radius:50%;
  background:var(--green);
}
.chat-view .chat-media[data-kind="voice"] .voice-play svg { position:relative; width:15px; height:15px; }
.chat-view .chat-media[data-kind="voice"] .voice-time {
  font-size:.8em;
  inline-size:4ch;
}
.chat-view .bubble:has(.chat-media[data-kind="voice"] > .voice-player):not(:has(.chat-quote,.chat-message-text,.media-loading)) {
  display:grid;
  grid-template-columns:44px auto;
  grid-template-rows:auto auto;
  align-items:center;
  column-gap:2px;
  padding:2px 7px 2px 2px;
}
.chat-view .bubble:has(.chat-media[data-kind="voice"] > .voice-player):not(:has(.chat-quote,.chat-message-text,.media-loading)) :is(.chat-media,.voice-player) {
  display:contents;
}
.chat-view .bubble:has(.chat-media[data-kind="voice"] > .voice-player):not(:has(.chat-quote,.chat-message-text,.media-loading)) .voice-play {
  grid-area:1 / 1 / span 2;
}
.chat-view .bubble:has(.chat-media[data-kind="voice"] > .voice-player):not(:has(.chat-quote,.chat-message-text,.media-loading)) .voice-time {
  grid-area:1 / 2;
  align-self:end;
}
.chat-view .bubble:has(.chat-media[data-kind="voice"] > .voice-player):not(:has(.chat-quote,.chat-message-text,.media-loading)) .chat-message-content {
  grid-area:2 / 2;
  align-self:start;
  margin:0;
}
.chat-view .bubble:has(.chat-media[data-kind="voice"] > .voice-player):not(:has(.chat-quote,.chat-message-text,.media-loading)) .chat-message-time {
  margin:0;
  text-align:start;
}
.chat-view .chat-photo-open,
.chat-view .chat-photo { max-width:100%; }

#dialog:has(.chat-photo-lightbox) {
  --chat-photo-width:min(760px,calc(100vw - 2 * max(12px,env(safe-area-inset-left,0px),env(safe-area-inset-right,0px))));
  --chat-photo-height:min(88dvh,calc(100dvh - 2 * max(12px,env(safe-area-inset-top,0px),env(safe-area-inset-bottom,0px))));
  width:fit-content;
  max-width:var(--chat-photo-width);
  max-height:var(--chat-photo-height);
  padding:0;
  border:0;
  overflow:hidden;
  background:#141a20;
}
#dialog:has(.chat-photo-lightbox) .dialog-head {
  position:absolute;
  inset:10px 10px auto auto;
  margin:0;
  z-index:1;
}
#dialog:has(.chat-photo-lightbox) .dialog-head h2 { display:none; }
#dialog:has(.chat-photo-lightbox) .dialog-head .iconbtn {
  width:44px;
  height:44px;
  color:white;
  background:#141a20db;
  border:1px solid #ffffffa6;
}
#dialog:has(.chat-photo-lightbox) .dialog-head .iconbtn:hover { background:#141a20; }
#dialog:has(.chat-photo-lightbox) .dialog-head .iconbtn:focus-visible { outline-color:white; }
.chat-full-photo.chat-photo-lightbox {
  min-width:64px;
  min-height:64px;
  max-width:var(--chat-photo-width);
  max-height:var(--chat-photo-height);
  margin:0;
}

.chat-view .chat-quote {
  display:grid;
  gap:1px;
  width:100%;
  min-width:0;
  margin:0 0 4px;
  padding:4px 8px;
  border:0;
  border-inline-start:3px solid var(--accent);
  border-radius:5px;
  background:var(--surface-subtle);
  background:color-mix(in srgb,var(--accent) 10%,transparent);
  color:var(--ink);
  font-size:.85em;
  line-height:1.3;
  text-align:start;
}
.chat-view .chat-quote-author,
.chat-view .chat-quote-text {
  display:block;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.chat-view .chat-quote-author { font-weight:650; }
.chat-view .chat-quote-text { color:var(--muted); }
.chat-view .chat-reply-preview {
  display:grid;
  grid-template-columns:minmax(0, 1fr) 44px;
  align-items:center;
  gap:5px;
  min-width:0;
  min-height:0;
  margin:0 0 6px;
  overflow:hidden;
}
.chat-view .chat-reply-preview[hidden] { display:none; }
.chat-view .chat-reply-preview .chat-quote { margin:0; }
.chat-view .chat-reply-preview button:focus-visible { outline-offset:-3px; }
.chat-view .chat-reply-cancel,
.chat-view .chat-reply-action {
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  padding:0;
  border-radius:50%;
}
.chat-view .chat-reply-action {
  flex:0 0 44px;
  margin-block:-22px;
  opacity:0;
  pointer-events:none;
}
.chat-view .chat-message-row:is(:focus-within,.reply-action-open) .chat-reply-action {
  opacity:1;
  pointer-events:auto;
}
@media (hover:hover) {
  .chat-view .chat-message-row:hover .chat-reply-action { opacity:1; pointer-events:auto; }
}
.chat-view .chat-quote-target .bubble,
.chat-view .bubble.chat-quote-target { outline:2px solid var(--accent); outline-offset:1px; }
.chat-view .chat-message-target .bubble {
  outline:3px solid var(--accent);
  outline-offset:2px;
  box-shadow:0 0 0 5px var(--accent-soft);
}
/* A static three-second marker also respects reduced-motion preferences. */
.chat-view .chat-jump-latest {
  position:sticky;
  bottom:6px;
  z-index:2;
  align-self:center;
  min-height:44px;
  max-width:100%;
  margin-top:6px;
  padding:8px 14px;
  border-radius:24px;
  background:var(--surface);
  color:var(--ink);
  box-shadow:var(--shadow);
  font-size:14px;
  line-height:1.35;
}
.large-text.chat-view .chat-jump-latest {font-size:18px;}

.chat-compose-area {
  display:flex;
  flex-direction:column;
  /* Keep the input row visible if previews need to shrink above it. */
  justify-content:flex-end;
  flex:0 1 auto;
  min-width:0;
  min-height:60px;
  max-height:62%;
  padding:10px 12px;
  overflow:hidden;
  border-top:1px solid var(--line);
  background:var(--surface);
}
.chat-view .chat-composer,
.chat-view .chat-recording {
  flex:none;
  order:1;
  width:100%;
  min-width:0;
  grid-template-columns:44px minmax(0, 1fr) 44px;
  align-items:end;
  gap:8px;
  margin:0;
}
.chat-view .chat-composer .chat-input {
  display:block;
  width:100%;
  min-width:0;
  height:44px;
  min-height:44px;
  max-height:var(--chat-input-limit,108px);
  margin:0;
  padding:11px 14px;
  resize:none;
  overflow-y:auto;
  border:1px solid var(--line);
  border-radius:24px;
  background:var(--surface-subtle);
  color:var(--ink);
  font-size:16px;
  line-height:1.375;
  box-shadow:none;
  scrollbar-width:thin;
}
.chat-view .chat-composer .chat-attach,
.chat-view .chat-recording > .iconbtn,
.chat-view .chat-main-action {
  display:grid;
  place-items:center;
  width:44px;
  min-width:44px;
  height:44px;
  min-height:44px;
  padding:0;
  border-radius:50%;
}
.chat-view .chat-composer .chat-attach { border:1px solid var(--line); background:var(--surface-subtle); color:var(--ink); }
.chat-view .chat-main-action { color:var(--on-accent); background:var(--accent); border-radius:50%; }
.chat-view .chat-attach svg,
.chat-view .chat-main-action svg { width:24px; height:24px; }
.chat-view .chat-recording { align-items:center; }
.chat-view .chat-preview { min-width:0; min-height:0; margin-bottom:6px; padding:6px 54px 6px 8px; overflow:auto; }
.chat-view .chat-photo-preview { max-height:clamp(34px,calc(var(--chat-viewport-height,100dvh) * .19),104px); }
.chat-view .chat-preview > .tiny,
.chat-view .chat-compose-area > .tiny { font-size:12px; line-height:1.35; margin-top:5px; }
.chat-view .chat-compose-area .note { margin:0; }
.chat-view .chat-error { font-size:13px; line-height:1.4; margin-top:8px; }

.large-text.chat-view .chat-peer-name { font-size:22px; }
.large-text.chat-view .chat-order-link { font-size:18px; min-height:48px; }
.large-text.chat-view .bubble { font-size:20px; line-height:1.4; }
.large-text.chat-view .bubble .chat-message-time { font-size:12px; margin-top:.62em; }
.large-text.chat-view .chat-day { font-size:14px; }
.large-text.chat-view .chat-reply-preview .chat-quote { font-size:16px; }
.large-text.chat-view .chat-composer,
.large-text.chat-view .chat-recording { grid-template-columns:48px minmax(0, 1fr) 48px; }
.large-text.chat-view .chat-composer .chat-input { min-height:50px; max-height:var(--chat-input-limit,140px); padding:11px 13px; font-size:20px; }
.large-text.chat-view .chat-composer .chat-attach,
.large-text.chat-view .chat-recording > .iconbtn,
.large-text.chat-view .chat-main-action { width:48px; min-width:48px; height:48px; min-height:48px; }
.large-text.chat-view .chat-compose-area > .tiny,
.large-text.chat-view .chat-preview > .tiny,
.large-text.chat-view .chat-error { font-size:16px; }

@media (max-width:650px) {
  body.messages-view .roles { display:none; }
}

@media (max-width:650px), (max-width:1024px) and (pointer:coarse) and (orientation:landscape) {
  html:has(> body.chat-view) { overflow:hidden; scrollbar-gutter:auto; }
  .chat-view .chat-demo-switch { display:none; }
  body.chat-view { overflow:hidden; overscroll-behavior:none; }
  .chat-view #app {
    --chat-safe-left:env(safe-area-inset-left, 0px);
    --chat-safe-right:env(safe-area-inset-right, 0px);
    --chat-safe-bottom:env(safe-area-inset-bottom, 0px);
    container:chat-viewport / size;
    position:fixed;
    top:var(--chat-viewport-top, 0px);
    left:var(--chat-viewport-left, 0px);
    width:var(--chat-viewport-width, 100%);
    max-width:100%;
    height:100vh;
    height:var(--chat-viewport-height, 100dvh);
    min-height:0;
    overflow:hidden;
    background:var(--surface);
  }
  .chat-view #app[data-chat-keyboard="open"] {
    --chat-safe-bottom:0px;
    --chat-input-limit:clamp(50px,calc(var(--chat-viewport-height,100dvh) * .22),108px);
  }
  .chat-view #app > .header,
  .chat-view #app > .role-wrap,
  .chat-view #app > .demo-foot { display:none; }
  .chat-view #app > .main {
    display:flex;
    width:100%;
    max-width:none;
    height:100%;
    min-height:0;
    margin:0;
    padding:0;
    overflow:hidden;
  }
  .chat-view .main > .chat-panel {
    width:100%;
    max-width:none;
    height:100%;
    min-height:0;
    margin:0;
    padding:0;
    border:0;
    border-radius:0;
  }
  .chat-dialog-header {
    grid-template-columns:44px 38px minmax(0, 1fr) 44px;
    gap:8px;
    min-height:56px;
    padding:calc(6px + env(safe-area-inset-top,0px)) calc(10px + var(--chat-safe-right)) 6px calc(10px + var(--chat-safe-left));
  }
  .chat-dialog-header .avatar { width:38px; height:38px; font-size:18px; }
  .chat-dialog-header .chat-peer-name { font-size:18px; }
  .chat-dialog-header .chat-bell { display:inline-flex; width:44px; height:44px; }
  .chat-bell .notification-bell { width:28px; height:28px; stroke-width:1.6; }
  .chat-view .chat-order-link {
    max-width:none;
    margin:0 calc(10px + var(--chat-safe-right)) 8px calc(10px + var(--chat-safe-left));
    font-size:15px;
  }
  .chat-view .chat-panel .chat-window {
    padding:10px calc(9px + var(--chat-safe-right)) 8px calc(9px + var(--chat-safe-left));
  }
  .chat-compose-area {
    padding:7px calc(9px + var(--chat-safe-right)) calc(7px + var(--chat-safe-bottom)) calc(9px + var(--chat-safe-left));
  }
  .chat-view #app[data-chat-keyboard="open"] .chat-photo-preview { max-height:44px; }
  .chat-view #toast { bottom:calc(76px + env(safe-area-inset-bottom)); z-index:60; }
}

@container chat-viewport (max-height:260px) {
  .chat-view .chat-panel .chat-window { padding-block:0; }
  .chat-view .chat-order-link { margin-bottom:4px; }
  .chat-view .chat-compose-area { max-height:calc(100% - 132px); }
  .chat-view .chat-reply-preview { margin-bottom:3px; }
}

/* Reuse the existing notification indicator while the global header is hidden. */
.chat-bell[data-unread="true"] { color:#c02e3d; border-color:transparent; }
.chat-bell[data-unread="true"]::before { content:""; position:absolute; inset:-1px; border:3px solid currentColor; border-radius:50%; pointer-events:none; }
.chat-bell[data-unread="true"] .notification-bell-shape { fill:currentColor; }
.chat-bell[data-unread="true"] .notification-bell-waves { opacity:.85; }
@media (prefers-reduced-motion:no-preference) {
  .chat-bell[data-unread="true"] > svg { animation:notification-bell-pulse 2.8s ease-in-out infinite; transform-origin:center; }
  .chat-bell[data-unread="true"]::before { animation:notification-ring-pulse 2.8s ease-in-out infinite; transform-origin:center; }
  .chat-bell[data-unread="true"] .notification-bell-swing { animation:notification-bell-ring 2.8s ease-in-out infinite; }
  .chat-bell[data-unread="true"] .notification-bell-waves { animation:notification-bell-waves 2.8s ease-in-out infinite; }
}