:root {
  color-scheme: light;
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic UI", Meiryo, sans-serif;
  color: #252528;
  background: #fff;
  font-synthesis: none;
  --ink: #252528;
  --muted: #64646c;
  --dark: #232327;
  --dark-muted: #c0bec3;
  --red: #ba1728;
  --red-hover: #9b1220;
  --red-soft: #fff1f2;
  --red-line: #efcdd1;
  --line: #ebecef;
  --surface: #fff;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: #fff; -webkit-font-smoothing: antialiased; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; opacity: .54; }
button, a, input, textarea, select { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid #a81828; outline-offset: 3px; }
svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.icon-library { display: none; }
.icon-button { width: 42px; height: 42px; padding: 0; border: 0; border-radius: 12px; background: none; color: inherit; display: inline-grid; place-items: center; flex: none; }
.icon-button:hover { background: #f2eef0; }
.primary { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; padding: 0 17px; border: 1px solid transparent; border-radius: 9px; background: var(--red); color: #fff; font-weight: 600; }
.primary:hover:enabled { background: var(--red-hover); }
.wide { width: 100%; justify-content: center; }
.form-error { color: #9f3328; font-size: 13px; margin: 0; }
.form-error:empty { display: none; }
.wordmark { font-family: Arial, sans-serif; font-weight: 900; font-style: italic; letter-spacing: -.045em; }
.wordmark span, .login-display span { color: var(--red); }
.login-view { min-height: 100dvh; max-width: 400px; margin: 0 auto; display: flex; flex-direction: column; justify-content: center; padding: 48px 24px 72px; background: #fff; }
.login-brand { display: flex; align-items: center; gap: 12px; padding: 0; background: #fff; color: var(--dark); margin-bottom: 48px; }
.login-brand .wordmark { font-size: 25px; }
.eyebrow, .login-version, .overline, .brand-subtitle { font: 700 11px/1.25 Arial, sans-serif; letter-spacing: .14em; }
.login-panel { display: block; padding: 0; }
.login-panel form { width: 100%; display: grid; gap: 20px; }
.overline { color: var(--muted); display: inline-flex; align-items: center; gap: 5px; margin: 0; }
.overline svg { width: 14px; height: 14px; }
.login-panel h1 { font-size: 24px; font-weight: 650; letter-spacing: -.02em; margin: 0 0 10px; }
.login-panel p:not(.form-error) { margin: 0; color: var(--muted); line-height: 1.7; font-size: 13px; }
.login-panel label, #group-title { display: grid; gap: 9px; font-size: 13px; font-weight: 600; }
.login-panel select, .login-panel input, #group-name { width: 100%; min-height: 48px; padding: 11px 12px; background: #fff; border: 1px solid #d8d9dd; border-radius: 8px; color: var(--ink); font-size: 16px; }

.app-shell { display: grid; grid-template-columns: 330px minmax(0, 1fr); height: 100dvh; min-height: 0; overflow: hidden; background: white; }
.sidebar { background: white; display: grid; grid-template-rows: 80px minmax(0, 1fr) 76px; min-height: 0; border-right: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 13px; padding: 0 24px; background: #fff; color: var(--dark); }
.brand .wordmark { font-size: 23px; line-height: 1; }
.brand-subtitle { color: #74747a; font-size: 9px; font-weight: 500; letter-spacing: .08em; border-left: 1px solid #dedee2; padding-left: 13px; }
.sidebar-body { display: flex; flex-direction: column; padding: 10px 0 0; overflow: hidden; }
.sidebar-heading { display: flex; align-items: center; justify-content: space-between; margin: 0 23px 20px; }
.sidebar-heading h1 { margin: 0; font-size: 24px; font-weight: 650; letter-spacing: -.035em; }
.new-button { min-height: 36px; font-size: 12px; padding: 0 10px; border-radius: 8px; gap: 4px; }
.new-button svg { width: 17px; height: 17px; }
.search { display: flex; align-items: center; gap: 8px; padding: 0 11px; border: 1px solid transparent; border-radius: 9px; background: #f5f5f6; color: #77777e; margin: 0 23px 17px; }
.search svg { width: 17px; height: 17px; }
.search input { width: 100%; border: 0; background: none; min-height: 39px; color: var(--ink); font-size: 16px; padding: 0; outline: none; }
.search:focus-within { border-color: var(--red); background: white; }
.search input::placeholder { color: #696770; font-size: 13px; }
.filters { display: flex; gap: 3px; padding: 3px; background: #f5f5f6; border: 0; border-radius: 9px; margin: 0 23px 18px; }
.filter { flex: 1; white-space: nowrap; padding: 4px; min-height: 32px; border: 0; border-radius: 7px; color: #68686f; background: none; font-size: 12px; font-weight: 500; }
.filter.selected { color: var(--ink); background: #fff; box-shadow: 0 1px 4px #20202512; font-weight: 650; }
.route-error { margin: 10px 18px 0; }
.room-list { overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #d9d9de transparent; padding: 0 10px 12px; }
.room-row { position: relative; width: 100%; min-height: 82px; border: 1px solid transparent; border-radius: 12px; background: white; color: var(--ink); display: grid; align-items: center; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 11px; text-align: left; padding: 13px 12px; margin: 0 0 4px; }
.room-swipe {
  --swipe-width: 96px;
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  touch-action: pan-y;
  touch-action: pan-y pinch-zoom;
}
.room-swipe-action {
  position: absolute;
  inset: 0 0 0 auto;
  width: var(--swipe-width);
  border: 0;
  background: var(--red);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
}
.room-swipe-action:focus-visible { outline: 2px solid #fff; outline-offset: -5px; }
.room-row-controls {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  align-items: center;
  background: #fff;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  transform: translateX(var(--swipe-offset, 0px));
  transition: transform 160ms ease-out;
}
.room-swipe.revealed { --swipe-offset: calc(-1 * var(--swipe-width)); }
.room-swipe.swiping .room-row-controls { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .room-row-controls { transition: none; }
}
.room-row-controls .room-row { min-width: 0; margin-bottom: 0; }
.room-menu { width: 44px; height: 44px; color: var(--muted); }
#room-archive-title { min-width: 0; overflow-wrap: anywhere; }
#room-archive-description { margin: 0; line-height: 1.6; }
#room-archive-error:empty { display: none; }
.room-row:hover { background: #f7f7f8; }
.room-row.active { background: #fff2f3; border-color: #f8e4e7; box-shadow: none; }
.room-row:focus-visible { outline-offset: -3px; }
.room-info, .room-meta { display: grid; gap: 7px; min-width: 0; }
.room-name, .room-preview { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.room-name { font-weight: 600; font-size: 14px; }
.room-preview, .room-time { font-size: 11px; color: var(--muted); line-height: 1.5; }
.room-meta { justify-items: end; }
.unread-badge { min-width: 19px; border-radius: 99px; padding: 2px 5px; font: 800 10px/1.35 Arial, sans-serif; text-align: center; color: white; background: var(--red); }
.no-rooms { color: var(--muted); font-size: 13px; padding: 6px 20px; }
.avatar { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 15px; font-weight: 600; color: var(--ink); background: #eeeef0; font-size: 15px; }
.avatar.amber { background: #eee9e0; color: #634e3e; }
.avatar.green { background: #e6e8ed; color: #464e60; }
.avatar.plum { background: #efe6ec; color: #704863; }
.avatar.group { background: #f4e9eb; color: #a52536; }
.sidebar-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid var(--line); padding: 0 16px 0 23px; }
.me, .person { display: flex; align-items: center; gap: 10px; min-width: 0; }
.me .avatar, .person .avatar { width: 35px; height: 35px; border-radius: 12px; font-size: 13px; }
.person strong, .me strong { font-size: 12px; font-weight: 600; display: block; }
.me small, .person small { font-size: 11px; color: var(--muted); display: block; margin-top: 3px; }
.logout, .link-button { color: var(--muted); }

.chat-main, .active-chat { min-width: 0; min-height: 0; }
.chat-main { height: 100%; display: grid; background: #fff; }
.active-chat { display: grid; grid-template-columns:minmax(0,1fr); grid-template-rows: auto minmax(0, 1fr) auto; position: relative; }
.chat-header { min-height: 80px; display: flex; align-items: center; gap: 12px; padding: 12px 30px; border-bottom: 1px solid var(--line); background: #fff; }
.chat-heading { min-width: 0; flex: 1; }
.chat-heading h2 { font-size: 16px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 0; }
.chat-heading p { color: var(--muted); font-size: 11px; margin: 5px 0 0; }
.participants { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 8px 11px; border: 0; background: #f6f6f7; color: #5c5c64; border-radius: 9px; min-height: 40px; font-size: 12px; }
.participants:hover { background: #f3f1f3; }
.participants svg { width: 17px; height: 17px; }
.mobile-back { display: none; }
.empty-state { display: grid; place-content: center; justify-items: center; text-align: center; padding: 24px; }
.empty-icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 21px; background: #f7f7f8; color: #77777e; }
.empty-icon svg { width: 30px; height: 30px; }
.empty-state h2 { margin: 21px 0 9px; font-size: 18px; font-weight: 600; }
.empty-state p { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.8; max-width: 300px; }
.timeline { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #d9d9de transparent; background: #fff; }
.timeline-inner { max-width: 1000px; margin: auto; padding: 28px 32px 32px; }
.older { display: block; margin: 0 auto 20px; color: #922232; border: 1px solid #ded9de; background: white; border-radius: 99px; padding: 7px 12px; font-size: 12px; }
.messages { display: flex; flex-direction: column; gap: 23px; }
.date-divider { align-self: center; display: flex; align-items: center; justify-content: center; gap: 12px; font-size: 11px; color: #76767d; font-weight: 500; margin: 0 0 5px; }
.date-divider::before, .date-divider::after { content: ""; width: 24px; height: 1px; background: #e9e9ed; }
.bubble-row { display: flex; align-items: flex-start; gap: 10px; }
.bubble-row.self { justify-content: end; }
.bubble-row .avatar { width: 32px; height: 32px; border-radius: 11px; font-size: 12px; margin-top: 21px; }
.bubble-stack { max-width: min(83%, 550px); min-width: 0; }
.bubble-head { display: flex; gap: 8px; align-items: baseline; margin: 0 2px 6px; color: #797980; font-size: 10px; }
.bubble-head strong { font-size: 11px; font-weight: 500; color: #686870; }
.self .bubble-head { justify-content: end; }
.bubble { background: #f4f4f6; border: 1px solid transparent; border-radius: 4px 16px 16px 16px; padding: 12px 15px; }
.self .bubble { background: #303036; color: #fff; border-color: transparent; border-radius: 16px 4px 16px 16px; }
.bubble p { margin: 0; line-height: 1.7; overflow-wrap: anywhere; white-space: pre-wrap; font-size: 14px; }
.bubble p + audio { margin-top: 8px; }
.bubble audio { width: min(260px, 56vw); max-width: 100%; display: block; height: 39px; }
.no-messages { text-align: center; color: var(--muted); font-size: 14px; }
.incoming { position: absolute; bottom: 164px; right: 30px; }
.incoming button { color: #852132; background: #fff5f6; border: 1px solid var(--red-line); border-radius: 999px; padding: 7px 12px; box-shadow: 0 3px 12px #23232718; font-size: 12px; }
.composer { background: #fff; border-top: 0; padding: 0 28px max(18px, env(safe-area-inset-bottom)); }
.composer-inner { max-width: 936px; margin: auto; padding: 10px 12px 8px; background: #fff; border: 1px solid #dddde2; border-radius: 16px; box-shadow: 0 2px 7px #23232705; }
.composer .form-error { padding-bottom: 8px; }
.compose-row { display: grid; grid-template-columns: 38px 38px minmax(0, 1fr) auto; gap: 5px; align-items: end; }
.compose-row textarea { grid-column: 1 / -1; grid-row: 1; width: 100%; min-width: 0; height: 46px; max-height: 116px; resize: none; padding: 10px 5px; border: 0; border-radius: 6px; background: #fff; color: var(--ink); font-size: 16px; line-height: 24px; }
.record { height: 38px; width: 38px; color: #73737c; background: none; border-radius: 9px; grid-row: 2; }
.record.recording { color: #9d2f2a; background: #f8ebe9; }
.send { height: 38px; min-height: 38px; grid-column: 4; grid-row: 2; font-size: 12px; border-radius: 9px; }
.send svg { width: 18px; height: 18px; }
.compose-help { color: #797980; font-size: 10px; line-height: 1.5; margin: 5px 5px 0; }
.voice-box { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 9px; padding: 6px 9px; border: 1px solid var(--red-line); background: #fff7f8; border-radius: 10px; }
.voice-status { flex: 1 0 auto; color: #952033; font-size: 12px; font-weight: 700; }
.voice-box audio { height: 36px; width: min(240px, 55vw); }
.voice-box .icon-button { width: 34px; height: 34px; margin-left: auto; }
.banner { position: fixed; right: 18px; top: 82px; max-width: calc(100vw - 36px); padding: 9px 12px; z-index: 1; color: #752d21; background: #fbede3; border: 1px solid #ecc9bb; border-radius: 8px; font-size: 12px; }

dialog { width: min(450px, calc(100vw - 32px)); max-height: 90dvh; border: 1px solid #e7e7eb; padding: 0; border-radius: 18px; color: var(--ink); background: #fff; box-shadow: 0 16px 60px #20202526; }
dialog::backdrop { background: #22222752; }
.dialog-header, .dialog-footer { padding: 19px 23px; display: flex; justify-content: space-between; align-items: center; }
.dialog-header { border-bottom: 1px solid var(--line); }
.dialog-header h2 { margin: 0; font-size: 18px; font-weight: 600; }
.dialog-body { display: grid; gap: 18px; padding: 22px 23px; }
.dialog-footer { justify-content: end; border-top: 1px solid var(--line); }
fieldset { min-width: 0; margin: 0; padding: 8px; border: 1px solid var(--line); border-radius: 9px; }
legend { padding: 0 4px; color: var(--muted); font-size: 12px; font-weight: 700; }
.dialog-type label, #member-options label { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 3px 8px; font-size: 13px; cursor: pointer; }
#member-options label { display: flex; }
#member-options label + label { border-top: 1px solid #eeecef; }
input[type=checkbox], input[type=radio] { accent-color: var(--red); width: 17px; height: 17px; margin-right: 5px; }
.member-list { gap: 12px; }
.room-link { width: 100%; padding: 9px; border: 1px solid var(--line); border-radius: 8px; font-size: 16px; }
.link-status { margin: 0; color: var(--muted); font-size: 13px; }


.account-actions { display: flex; align-items: center; gap: 3px; }
.account-admin, .secondary { background: white; color: var(--ink); border: 1px solid var(--line); border-radius: 8px; min-height: 36px; padding: 6px 10px; font-size: 12px; }
.account-admin:hover, .secondary:hover { background: #f6f4f6; }
.account-fields { display: grid; gap: 11px; }
.account-fields label { display: grid; gap: 5px; font-size: 13px; font-weight: 650; }
.account-fields input, .issued textarea { width: 100%; min-width: 0; border: 1px solid var(--line); border-radius: 8px; background: white; color: var(--ink); padding: 9px; font: inherit; font-size: 16px; }
.issued { display: grid; gap: 7px; border: 1px solid var(--red-line); border-radius: 9px; background: var(--red-soft); padding: 11px; font-size: 13px; }
.issued button { justify-self: start; }
.issued textarea { resize: vertical; }
.account-list { margin: 0; padding: 0; list-style: none; }
.account-list li { display: flex; gap: 10px; align-items: center; justify-content: space-between; padding: 8px 0; border-top: 1px solid var(--line); }
.account-detail, .file-detail { display: grid; gap: 3px; min-width: 0; overflow-wrap: anywhere; }
.account-detail small, .file-detail small { color: var(--muted); font-size: 11px; }
#password-dialog .dialog-footer { gap: 8px; }
.file-box, .file-link { display: flex; align-items: center; gap: 8px; min-width: 0; }
.file-box { margin-bottom: 8px; padding: 4px 8px; border: 1px solid var(--red-line); border-radius: 9px; color: var(--ink); font-size: 13px; }
.file-box span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-box button { width: 34px; height: 34px; }
.file-link { padding: 3px 0; color: #971c2d; text-decoration: none; font-size: 13px; }
.file-link:hover strong { text-decoration: underline; }
.bubble p + .file-link, .bubble audio + .file-link { margin-top: 8px; }

.login-product { font-size: 12px; color: #727279; border-left: 1px solid #dddde1; padding-left: 12px; }
.login-panel .overline { font-family: inherit; font-size: 12px; font-weight: 500; line-height: 1.4; letter-spacing: 0; }
.login-panel p:empty { display: none; }
.login-panel .wide { min-height: 48px; margin-top: 5px; }
.login-panel .wide svg { display: none; }
.self .file-link { color: #fff; }
.self .file-detail small { color: #d1d1d8; }
.file-link > svg { width: 30px; height: 30px; }
.file-link { gap: 12px; padding: 6px 0; }
.bubble audio { border-radius: 20px; }
.me > span:last-child { min-width: 0; }
.me strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#message::placeholder { color: #929299; font-size: 14px; }
button { transition: background-color 120ms ease, border-color 120ms ease; }
button:active:enabled { filter: brightness(.96); }
@media (min-width: 701px) and (max-width: 1000px) {
  .app-shell { grid-template-columns: 300px minmax(0, 1fr); }
  .brand { padding: 0 20px; }
  .chat-header { padding: 12px 20px; }
  .timeline-inner { padding: 24px 20px; }
  .composer { padding-left: 20px; padding-right: 20px; }
}
@media (max-width: 700px) {
  .login-view { min-height: 100dvh; justify-content: flex-start; padding: max(55px, env(safe-area-inset-top)) 28px 40px; }
  .login-brand { margin-bottom: 58px; gap: 12px; }
  .login-brand .wordmark { font-size: 23px; }
  .login-panel h1 { font-size: 23px; }
  .login-panel form { gap: 20px; }
  .app-shell { display: block; }
  .sidebar { height: 100%; grid-template-rows: calc(68px + env(safe-area-inset-top)) minmax(0, 1fr) calc(70px + env(safe-area-inset-bottom)); }
  .brand { padding: env(safe-area-inset-top) 24px 0; }
  .sidebar-body { padding-top: 10px; }
  .sidebar-heading { margin-bottom: 18px; }
  .sidebar-heading h1 { font-size: 27px; }
  .new-button { min-height: 40px; padding: 0 12px; }
  .filters { margin-bottom: 14px; }
  .filter { min-height: 36px; }
  .room-row { min-height: 86px; }
  .room-name { font-size: 15px; }
  .room-preview { font-size: 12px; }
  .sidebar-footer { padding-bottom: env(safe-area-inset-bottom); }
  .chat-main { display: none; }
  .app-shell.open-chat .sidebar { display: none; }
  .app-shell.open-chat .chat-main { display: grid; }
  .chat-header { min-height: calc(68px + env(safe-area-inset-top)); gap: 8px; padding: calc(10px + env(safe-area-inset-top)) 12px 10px 3px; }
  .chat-header .avatar { width: 36px; height: 36px; border-radius: 12px; }
  .chat-heading h2 { font-size: 15px; }
  .chat-heading p { font-size: 10px; margin-top: 4px; }
  .chat-header .link-button, .participants { width: 38px; min-width: 38px; padding: 0; background: none; }
  .mobile-back { display: inline-grid; width: 36px; }
  .participants span { display: none; }
  .timeline-inner { padding: 23px 16px 28px; }
  .bubble-stack { max-width: 84%; }
  .bubble { padding: 10px 12px; }
  .bubble p { font-size: 14px; }
  .bubble-row .avatar { width: 28px; height: 28px; border-radius: 10px; }
  .bubble-row { gap: 8px; }
  .composer { padding: 0 12px max(12px, env(safe-area-inset-bottom)); }
  .composer-inner { padding: 7px 9px 6px; border-radius: 16px; }
  .compose-row { grid-template-columns: 40px 40px minmax(0, 1fr) auto; }
  .record { width: 40px; height: 40px; }
  .send { height: 40px; min-height: 40px; padding: 0 13px; }
  .send svg { width: 17px; height: 17px; }
  .compose-help { font-size: 9px; }
  .incoming { bottom: 170px; right: 20px; }
  dialog { max-height: 85dvh; }
}
@media (prefers-reduced-motion: reduce) {
  button { transition: none; }
}

/* Mobile communication controls */
.sidebar-tools { display: flex; gap: 8px; padding: 12px 23px; margin-top: auto; border-top: 1px solid var(--line); }
.sidebar-tools button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex: 1; min-height: 42px; }
.sidebar-tools svg { width: 18px; height: 18px; }
.room-list { flex: 1; }
.directory-person { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.directory-person .person { grid-column: 1 / -1; align-items: flex-start; }
.directory-person .person small { line-height: 1.7; }
.directory-details { display: grid; gap: 8px; min-width: 0; }
.directory-details a { color: #54545b; font-size: 13px; overflow-wrap: anywhere; }
.contact-empty { color: #85858d; font-size: 12px; }
.directory-person > button { align-self: center; }
#notification-status { line-height: 1.9; }
#password-dialog .dialog-header { padding-top: 26px; padding-bottom: 22px; }
.call-buttons { display: grid; gap: 14px; }
.call-buttons button { min-height: 48px; }
.call-note { font-size: 12px; color: var(--muted); line-height: 1.8; margin: 2px 0 0; }
.push-talk { min-height: 120px !important; border: 1px solid #d8d8df; border-radius: 20px; background: #f5f5f6; color: #303036; font: inherit; font-weight: 600; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.push-talk.talking { background: var(--red); color: white; border-color: var(--red); }
.active-call { position: fixed; z-index: 3; left: 50%; top: max(10px,env(safe-area-inset-top)); transform: translateX(-50%); background: #303036; color: white; border: 0; border-radius: 30px; padding: 10px 20px; box-shadow: 0 2px 10px #0002; }
.call-invitation { position: fixed; z-index: 4; left: 50%; top: max(10px,env(safe-area-inset-top)); transform: translateX(-50%); display: flex; align-items: center; gap: 15px; padding: 12px 16px; max-width: calc(100vw - 24px); border: 1px solid var(--line); border-radius: 15px; background: white; box-shadow: 0 4px 18px #0002; font-size: 13px; }
.call-invitation span { overflow-wrap: anywhere; }
@media (max-width:700px) {
  .chat-header { gap: 5px; }
  .chat-header #copy-room-link { display: none; }
  .chat-header #voice-call { width: 38px; }
  .sidebar-tools { padding: 10px 23px; }
  #call-dialog { width: min(420px,calc(100vw - 24px)); }
}

.chat-heading p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me small { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.avatar { overflow: hidden; flex-shrink: 0; }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.profile-trigger { border: 0; background: transparent; text-align: left; font: inherit; color: inherit; cursor: pointer; padding: 0; min-width: 0; }
.profile-trigger:focus-visible { outline: 2px solid var(--red, #bd142b); outline-offset: 5px; border-radius: 10px; }
.profile-body { display: flex; flex-direction: column; align-items: stretch; gap: 14px; text-align: center; }
#profile-current .avatar { width: 160px; height: 160px; border-radius: 32px; font-size: 52px; margin: 0 auto; }
#profile-preview { width: min(220px,100%); height: auto; aspect-ratio: 1; border-radius: 32px; margin: 0 auto; touch-action: none; cursor: grab; }
#profile-zoom-label { font-size: 13px; color: #666; }
#profile-zoom { display: block; width: 100%; margin: 10px 0; accent-color: #bd142b; }
.profile-remove { border: 0; background: none; color: #666; padding: 8px; cursor: pointer; }
#profile-error { font-size: 13px; color: #bd142b; margin: 0; }
#profile-error:empty { display: none; }
.profile-body [hidden] { display: none !important; }

/* Vehicle rooms share the chat controls and keep the latest handoff visible. */
.vehicle-create { display:flex; align-items:center; justify-content:center; gap:8px; margin:0 23px 12px; flex-shrink:0; }
.vehicle-create svg { width:18px; height:18px; }
.room-vehicle-id { color:var(--muted); font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.active-chat.has-vehicle { grid-template-rows:auto auto minmax(0,1fr) auto; }
.vehicle-summary { padding:12px 30px; border-bottom:1px solid var(--line); background:#fff; max-height:32dvh; overflow:auto; }
.vehicle-summary-top { display:flex; align-items:center; gap:10px; }
.vehicle-summary-top button { margin-left:auto; flex-shrink:0; }
.vehicle-stage { font-size:12px; color:var(--red); background:var(--red-soft); border-radius:5px; padding:5px 7px; white-space:nowrap; }
.vehicle-plate { font-size:12px; overflow-wrap:anywhere; }
.vehicle-facts { display:grid; grid-template-columns:60px minmax(0,1fr); gap:5px 10px; margin:10px 0 4px; font-size:12px; line-height:1.6; }
.vehicle-facts dt { color:var(--muted); }
.vehicle-facts dd { margin:0; overflow-wrap:anywhere; }
.vehicle-updated { color:var(--muted); font-size:10px; }
.vehicle-event { align-self:center; width:min(100%,520px); padding:10px 12px; border:1px solid var(--line); border-radius:8px; font-size:12px; color:#56565e; }
.vehicle-event small { font-size:10px; color:var(--muted); }
.vehicle-event p { margin:6px 0 0; white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.7; }
.vehicle-fields select { width:100%; min-height:42px; padding:9px; border:1px solid var(--line); border-radius:8px; background:#fff; font-size:16px; color:var(--ink); }
.vehicle-fields small { font-size:11px; color:var(--muted); line-height:1.6; }
.vehicle-fields :disabled { color:var(--muted); opacity:1; }
#vehicle-members { display:grid; gap:4px; max-height:200px; overflow:auto; }
#vehicle-members label { display:flex; align-items:center; gap:6px; min-height:38px; font-weight:400; }
@media (max-width:700px) {
 .vehicle-summary { padding:10px 16px; }
 .vehicle-summary-top { gap:7px; }
 .vehicle-facts { font-size:12px; }
 .filters { flex-shrink:0; }
}

/* Vehicle workflow v9 */
.vehicle-nav { display:flex; margin:0 16px 16px; border-bottom:1px solid var(--line); gap:3px; flex-shrink:0; }
.vehicle-nav button { flex:1; padding:10px 2px; border:0; border-radius:0; font-size:12px; background:#fff; white-space:nowrap; }
.vehicle-nav button[aria-pressed=true] { color:var(--red); border-bottom:2px solid var(--red); font-weight:650; }
.vehicle-quick-filters {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2px;
  margin: 0 16px 4px;
  max-width: 400px;
  flex-shrink: 0;
}
.vehicle-quick-filters button {
  min-height: 38px;
  padding: 4px 2px;
  border: 0;
  border-radius: 6px;
  font-size: 12px;
  white-space: nowrap;
}
.vehicle-quick-filters button[aria-pressed=true] { color: var(--red); background: var(--red-soft); font-weight: 650; }
#vehicle-detail-filter.active { color: var(--red); border-color: #d9a3aa; background: #fff8f8; font-weight: 650; }
.vehicle-tools { display:flex; gap:6px; padding:0 20px 12px; flex-shrink:0; }
.vehicle-board { overflow:auto; flex:1; padding:0 16px 16px; min-height:0; }
.vehicle-mode:not(.schedule-mode) .vehicle-tools { flex-wrap: wrap; gap: 4px; padding: 0 16px 6px; }
.vehicle-mode:not(.schedule-mode) .vehicle-tools > button {
  min-height: 38px;
  padding: 4px 8px;
  border-color: transparent;
  color: var(--muted);
}
.vehicle-mode:not(.schedule-mode) #vehicle-detail-filter.active { color: var(--red); border-color: #d9a3aa; }
.vehicle-count { display:block; color:var(--muted); margin:4px 4px 10px; }
.vehicle-card { position:relative; display:flex; flex-direction:column; gap:9px; width:100%; text-align:left; border:1px solid var(--line); background:#fff; color:var(--ink); border-radius:12px; padding:15px; margin-bottom:10px; font-size:13px; }
.vehicle-card:hover { border-color:#c8c8ce; }
.vehicle-card strong,.vehicle-model { overflow-wrap:anywhere; }
.vehicle-card small { font-size:11px; line-height:1.6; color:var(--muted); }
.status-row { display:flex; gap:5px; flex-wrap:wrap; }
.extra-chip { padding:4px 6px; border-radius:5px; font-size:10px; background:#f3f3f5; }
.overdue-text,.schedule-warning { color:#a32332; font-size:11px; line-height:1.7; }
.vehicle-customer { font-size:13px; overflow-wrap:anywhere; }
.vehicle-summary { max-height:38dvh; }
.vehicle-summary-top { flex-wrap:wrap; }
.vehicle-summary-top .secondary { min-height:32px; font-size:11px; }
.status-row { margin:9px 0; }
.status-chip { border:1px solid #dddde3; background:#fff; border-radius:6px; padding:7px 8px; font-size:11px; min-height:34px; color:#37373e; }
.status-chip.work { border-color:#ead0d4; background:#fff6f7; color:#972236; }
.status-chip:disabled { opacity:.9; }
.vehicle-details { font-size:11px; line-height:1.7; }
.vehicle-details summary { cursor:pointer; color:#656570; }
.vehicle-actions { display:flex; flex-wrap:wrap; gap:7px; padding:8px 0; }
.vehicle-actions .secondary { font-size:11px; }
.legacy-note { font-size:11px; color:#746249; }
.vehicle-summary-bottom { display:flex; justify-content:space-between; gap:6px; margin-top:8px; }
.case-picker,.plan-preview { border:0; background:#fff; padding:5px 0; text-align:left; color:#5c5c67; font-size:11px; max-width:50%; overflow-wrap:anywhere; }
.plan-preview { text-align:right; color:var(--red); }
.people-checks { max-height:180px; overflow:auto; display:grid; grid-template-columns:1fr 1fr; gap:4px; }
.people-checks label,.check-line { display:flex!important; align-items:center; min-height:36px; font-weight:400!important; font-size:12px!important; gap:5px; }
.vehicle-fields input[type=checkbox] { width:17px; min-width:17px; padding:0; }
.vehicle-fields textarea { width:100%; font:inherit; font-size:16px; border:1px solid var(--line); border-radius:8px; padding:10px; }
.vehicle-error { margin:0 23px 12px; }
.quick-tags { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.tag-choice { padding:14px 8px; border:1px solid var(--line); border-radius:9px; background:#fff; color:var(--ink); font:inherit; font-size:13px; }
.tag-choice.selected { border-color:var(--red); background:var(--red-soft); }
.plan-row { padding:12px; text-align:left; border:1px solid var(--line); border-radius:8px; background:#fff; white-space:pre-line; font-size:12px; line-height:1.8; }
.plan-navigation { display:flex; gap:5px; align-items:center; padding-bottom:14px; }
.plan-navigation input { flex:1; min-width:0; font:inherit; font-size:14px; border:1px solid var(--line); padding:6px; border-radius:6px; }
.schedule-day {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
}
.schedule-day-title { margin: 0 0 10px; font-size: 14px; font-weight: 650; }
.schedule-day > .no-rooms { margin: 0; padding: 4px 0; }
.schedule-card { border:1px solid var(--line); border-radius:10px; padding:10px; margin-bottom:10px; display:grid; gap:8px; }
.schedule-open { text-align:left; white-space:pre-line; border:0; background:#fff; color:var(--ink); line-height:1.7; font-size:12px; padding:0; overflow-wrap:anywhere; }
.schedule-card.overdue { border-color:#e7b4bc; }
.case-label { display:block; font-size:10px; color:#8b6c75; margin-bottom:4px; }
.bubble-row>.case-label { display:none; }
.ack-button { border:0; background:#fff; color:#9c2637; font-size:10px; padding:8px 0 0; }
.ack-list { display:block; font-size:10px; margin-top:6px; }
@media(min-width:701px){
 .app-shell.vehicle-mode:not(.open-chat) { grid-template-columns:1fr; }
 .app-shell.vehicle-mode:not(.open-chat) .chat-main { display:none; }
 .app-shell.vehicle-mode:not(.open-chat) .sidebar { border:0; }
 .vehicle-mode:not(.open-chat) .vehicle-board { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:12px; align-content:start; }
 .vehicle-mode:not(.open-chat) .vehicle-count { grid-column:1/-1; }
 .schedule-mode:not(.open-chat) .vehicle-board { display:block; }
 .schedule-mode:not(.open-chat) .week-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:12px; }
 .vehicle-mode:not(.open-chat) .vehicle-nav { max-width:600px; }
 .vehicle-mode:not(.open-chat) .vehicle-quick-filters { grid-template-columns: repeat(8, minmax(0, 1fr)); max-width: 600px; }
 .vehicle-mode:not(.open-chat) .search { max-width:600px; }
 .vehicle-mode:not(.open-chat) .vehicle-create { align-self:flex-start; }
}
@media(max-width:700px){
 .vehicle-nav { margin:0 16px 12px; }
 .sidebar-body { padding-top:2px; }
 .vehicle-nav button { min-height:40px; }
 .vehicle-summary { padding:10px 14px; }
 .vehicle-summary-top { gap:6px; }
 .vehicle-customer { font-size:12px; }
 .vehicle-summary .vehicle-plate { font-size:11px; }
 .vehicle-fields input[type=date],.vehicle-fields input[type=time] { min-height:44px; appearance:none; }
 .vehicle-tools button { min-height:38px; }
}

.location-quick { display:block; padding:3px 0 7px; border:0; background:#fff; color:#60606b; font-size:11px; text-align:left; min-height:30px; }

/* Two separate workspaces, with settings kept out of the conversation list. */
.section-nav { display:flex; gap:8px; margin:0 20px 22px; flex-shrink:0; }
.section-nav button { display:flex; align-items:center; justify-content:center; gap:7px; flex:1; border:1px solid var(--line); border-radius:9px; min-height:46px; padding:8px; background:#fff; color:var(--muted); font:inherit; font-size:13px; font-weight:600; white-space:nowrap; }
.section-nav button[aria-pressed=true] { color:var(--red); background:var(--red-soft); border-color:#e9c7cd; }
.section-nav svg { width:19px; height:19px; }
.section-unread { background:var(--red); color:#fff; min-width:17px; height:17px; padding:0 4px; border-radius:9px; font-size:10px; line-height:17px; }
.sidebar-heading { gap:10px; }
.sidebar-heading h1 { white-space:nowrap; font-size:23px; }
.sidebar-heading .new-button { flex-shrink:0; }
.settings-trigger { display:flex; align-items:center; gap:9px; border:0; background:#fff; padding:10px 0; color:var(--muted); font:inherit; font-size:13px; width:100%; }
.settings-trigger svg,.settings-row svg { width:19px; height:19px; flex-shrink:0; }
.settings-list { display:flex; flex-direction:column; gap:0; }
.settings-list .me { padding:0 0 20px; width:100%; }
.settings-row { display:flex; align-items:center; gap:12px; min-height:54px; padding:12px 0; border:0; border-top:1px solid var(--line); border-radius:0; background:#fff; text-align:left; color:var(--ink); font:inherit; font-size:14px; }
.settings-row span { margin-left:auto; color:var(--muted); }
.settings-row.logout { margin-top:15px; color:var(--muted); }
@media(min-width:701px){.vehicle-mode:not(.open-chat) .section-nav { max-width:600px; }}
@media(max-width:700px){.section-nav { margin-bottom:20px; }.sidebar-heading h1 { font-size:24px; }}

/* Main navigation stays within thumb reach, separately from vehicle list filters. */
.app-shell { grid-template-rows:minmax(0,1fr) auto; }
.sidebar { grid-template-rows:80px minmax(0,1fr); }
.section-nav { grid-column:1/-1; margin:0!important; max-width:none!important; padding:6px 12px max(6px,env(safe-area-inset-bottom)); border-top:1px solid var(--line); background:#fff; gap:0; }
.section-nav button { flex-direction:column; gap:4px; position:relative; border:0; border-radius:0; padding:7px 4px; min-height:56px; font-size:11px; background:#fff!important; }
.section-nav button[aria-pressed=true] { color:var(--red); }
.section-nav svg { width:22px; height:22px; }
.section-unread { position:absolute; top:1px; left:calc(50% + 8px); }
.header-settings { margin-left:auto; flex-shrink:0; width:34px; height:34px; }
.brand { gap:10px; padding-left:20px; padding-right:14px; }
.brand-subtitle { font-size:8px; padding-left:10px; }
.history-filter { min-width:0; max-width:170px; border:1px solid var(--line); background:#fff; color:var(--ink); border-radius:8px; padding:6px; font:inherit; font-size:12px; }
.case-lifecycle { display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:11px; color:var(--muted); margin-top:6px; }
.case-complete { border:0; background:#fff; color:var(--red); font-size:11px; padding:7px 0; margin-left:auto; }
@media(max-width:700px){
 .app-shell { display:grid; grid-template-columns:minmax(0,1fr); }
 .sidebar { height:auto; grid-template-rows:calc(68px + env(safe-area-inset-top)) minmax(0,1fr); }
 .brand { padding-top:env(safe-area-inset-top); }
 .app-shell.open-chat .chat-main { min-height:0; }
 .section-nav { padding-bottom:max(6px,env(safe-area-inset-bottom)); }
}

/* Conversation-first vehicle chat and a compact stamp tray. */
.room-details-trigger { border:0; background:transparent; text-align:left; padding:0; color:inherit; flex:1; min-width:0; cursor:pointer; }
.room-details-trigger:disabled { opacity:1; cursor:default; }
.room-details-trigger h2,.room-details-trigger p { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#vehicle-details-dialog .vehicle-summary { max-height:none; overflow:visible; border:0; padding:18px 22px; }
#vehicle-details-dialog .vehicle-details { font-size:13px; margin:15px 0; }
#vehicle-details-dialog .vehicle-customer { font-size:16px; }
.vehicle-detail-model { color:var(--muted); font-size:13px; line-height:1.6; }
.choice-trigger { width:100%; display:block; text-align:left; min-height:46px; padding:11px 12px; border:1px solid var(--line); border-radius:8px; background:#fff; color:var(--ink); font:inherit; font-size:15px; }
.choice-list { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:14px 0; }
.choice-option { min-height:48px; padding:10px; background:#fff; border:1px solid var(--line); border-radius:9px; color:var(--ink); font:inherit; font-size:14px; overflow-wrap:anywhere; }
#choice-custom { margin-top:15px; }
.stamp-tray { border-bottom:1px solid var(--line); padding:0 0 8px; margin-bottom:8px; }
.stamp-tray-heading { display:flex; align-items:center; justify-content:space-between; font-size:13px; }
.stamp-tray-heading .icon-button { width:30px; height:30px; }
.stamp-tabs { display:flex; gap:5px; overflow:auto; margin:5px 0 8px; }
.stamp-tab { border:0; background:#f5f5f6; border-radius:6px; padding:6px 8px; white-space:nowrap; color:var(--muted); font-size:11px; }
.stamp-tab[aria-pressed=true] { color:var(--red); background:var(--red-soft); }
.stamp-options { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; max-height:140px; overflow:auto; }
.stamp-choice { min-height:55px; border:1px solid #e5d3d7; border-radius:10px; background:#fff9fa; color:#882536; font-size:12px; font-weight:650; padding:6px 3px; }
.stamp-choice:disabled { opacity:.45; }
#stamp-note { width:100%; min-height:32px; font-size:14px; border:0; background:#f5f5f6; border-radius:6px; padding:6px 8px; margin-top:8px; }
#stamp-feedback { margin:5px 0 0; font-size:10px; color:var(--muted); }
.stamp-message { width:fit-content; max-width:85%; align-self:flex-start; border:0; background:#faf4f5; border-radius:16px; padding:14px 18px; }
.stamp-message.self { align-self:flex-end; }
.stamp-label { display:block; font-size:25px; line-height:1.6; margin:4px 0; color:#9d2338; letter-spacing:.02em; }
.stamp-message.work { background:#f1f6f5; }.stamp-message.work .stamp-label { color:#267260; }
.stamp-message.parts { background:#faf5eb; }.stamp-message.parts .stamp-label { color:#92651c; }
.stamp-note { font-size:12px!important; }
#stamp-toggle { color:var(--red); }
@media(max-width:700px){
 .detail-sheet,.choice-sheet { width:100%; max-width:100%; max-height:88dvh; margin:auto 0 0; border-radius:18px 18px 0 0; padding-bottom:env(safe-area-inset-bottom); }
 .active-chat .compose-help { display:none; }
 .composer-inner { padding-top:8px; padding-bottom:8px; }
 .compose-row { gap:3px; }
 .compose-row .icon-button { width:32px; min-width:32px; }
 .stamp-options { max-height:125px; }
}

/* Linked progress sheets: full-width touch targets without reducing chat height. */
.linked-row{display:block;width:100%;text-align:left;white-space:pre-line;padding:14px;margin:6px 0;border:1px solid #e3e3e5;border-radius:10px;background:#fff;color:#252527;line-height:1.65;overflow-wrap:anywhere}
.linked-row.done{color:#747477;background:#fafafa}.linked-parent{display:block;font-size:13px;color:#666;white-space:pre-wrap}.linked-status{display:block;padding:10px 0}.linked-note,.linked-history p{white-space:pre-wrap;overflow-wrap:anywhere}.linked-history p{border-top:1px solid #e7e7e9;padding:12px 0;font-size:13px;line-height:1.7}.linked-readiness{padding:12px;background:#f6f6f7;border-radius:8px;font-size:13px}.linked-entry{display:grid;gap:8px;margin:12px 0}.target-reply{display:block;border:0;border-left:3px solid #bc122b;text-align:left;white-space:normal;overflow-wrap:anywhere;background:#f6f6f7;color:#555;font-size:12px;padding:10px;margin:6px 0;max-width:100%;min-height:44px}.unassigned-card{padding:16px;border-bottom:1px solid #e8e8e8;display:grid;gap:10px}.unassigned-card small{color:#737377}#vehicle-form-body>button{min-height:44px}#vehicle-form-body h3{margin:22px 0 8px;font-size:15px}#vehicle-form-body textarea{width:100%;box-sizing:border-box}#vehicle-form-body{overflow-wrap:anywhere}

.linked-stamps{display:grid;grid-template-columns:1fr 1fr;gap:8px}.linked-stamps button{min-height:52px}.stamp-note{overflow-wrap:anywhere}
/* Schedule resources share the app's white mobile layout. */
.schedule-tabs { width: 100%; margin: 0 0 4px; }
.vehicle-tools:has(.schedule-tabs){flex-wrap:wrap}.fleet-card{border:1px solid #e4e4e7;border-radius:12px;padding:14px;margin:10px 0;display:flex;flex-direction:column;gap:8px;background:white}.fleet-title{border:0;text-align:left;background:white;padding:0;font-weight:700;font-size:16px}.booking-row{display:block;width:100%;white-space:pre-line;text-align:left;padding:12px;border:1px solid #ddd;border-left:3px solid #666;background:#fff;border-radius:7px;line-height:1.6;margin:5px 0}.booking-row.out{border-left-color:#bb142a;background:#fff8f8}.booking-row.requested{border-left-color:#b47617}.booking-row.returned,.booking-row.cancelled{color:#777}.fleet-card small{color:#666}.fleet-card p{margin:3px 0}.schedule-card>small{display:block;padding:8px;line-height:1.5}.schedule-mode #vehicle-tools{flex-wrap:wrap;align-items:center}.schedule-mode .plan-navigation{flex-wrap:nowrap}.schedule-mode .plan-navigation input{min-width:0;flex:1}#vehicle-form-body p{white-space:pre-line;overflow-wrap:anywhere}
/* Vehicle-by-date availability board; sticky car names remain visible on phones. */
.fleet-period-controls{display:flex;gap:5px;align-items:center;margin:8px 0}.fleet-period-controls button{min-height:36px;padding:7px 10px;font-size:12px}.fleet-period-controls button[aria-pressed=true]{background:#252527;color:white;border-color:#252527}.fleet-period-controls button:last-child{margin-left:auto}.fleet-range{margin:12px 0 8px;font-size:14px;font-weight:650}.fleet-legend{display:flex;flex-wrap:wrap;gap:7px 12px;font-size:11px}.fleet-legend span:before{content:'';display:inline-block;width:9px;height:9px;border:1px solid #ddd;border-radius:2px;margin-right:4px}.legend-free:before{background:#edf8f1}.legend-reserved:before{background:#e7f0fb}.legend-out:before{background:#bd1530}.legend-maintenance:before{background:#555}.legend-requested:before{background:#fff0cc}.legend-unknown:before{background:#eee}.fleet-hint{display:block;color:#727275;font-size:11px;margin:8px 0}.fleet-calendar-scroll{overflow:auto;border:1px solid #ddd;border-radius:9px;max-height:60dvh;isolation:isolate;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}.fleet-calendar{--fleet-name:160px;--fleet-day:100px;width:calc(var(--fleet-name) + var(--fleet-days) * var(--fleet-day));font-size:12px}.fleet-calendar-head{position:sticky;top:0;z-index:5;display:grid;grid-template-columns:var(--fleet-name) repeat(var(--fleet-days),var(--fleet-day));height:48px;background:white;border-bottom:1px solid #ddd}.fleet-corner{position:sticky;left:0;background:white;z-index:6;padding:15px 10px;font-weight:650;border-right:1px solid #ddd}.fleet-date{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border-right:1px solid #eee}.fleet-date small{color:#777;font-size:10px}.fleet-date.is-today{background:#fff1f3;color:#a41226}.fleet-calendar-row{display:grid;grid-template-columns:var(--fleet-name) 1fr;border-bottom:1px solid #ddd;min-height:calc(32px + var(--fleet-lanes) * 58px)}.fleet-calendar-row:last-child{border-bottom:0}.fleet-row-name{position:sticky;left:0;z-index:3;background:white;border:0;border-right:1px solid #ddd;border-radius:0;padding:10px;text-align:left;display:flex;flex-direction:column;justify-content:center;gap:5px;overflow-wrap:anywhere;line-height:1.4;font-size:12px;color:#252527}.fleet-row-name strong{font-weight:650}.fleet-row-name small,.fleet-row-summary{font-size:10px;color:#717175}.fleet-track{position:relative;display:grid;grid-template-columns:repeat(var(--fleet-days),var(--fleet-day))}.fleet-day-cell{padding:6px 0 0;display:flex;align-items:flex-start;justify-content:center;border:0;border-right:1px solid #e0e9e2;border-radius:0;background:#f3faf5;color:#38724b;font-size:10px;min-height:100%;height:100%}.fleet-day-cell.busy{background:#fff;color:#777}.fleet-day-cell.pending{background:#fffbef}.fleet-day-cell.unknown{background:repeating-linear-gradient(135deg,#f8f8f8 0 6px,#f1f1f1 6px 7px);color:#888}.fleet-day-cell.blocked{background:#eee;color:#666}.fleet-day-cell.late{background:#fff0f0}.fleet-day-cell.is-today{box-shadow:inset 1px 0 #bc1530}.fleet-period{position:absolute;display:flex;flex-direction:column;justify-content:center;gap:4px;height:50px;min-height:44px;padding:6px 9px;box-sizing:border-box;border:1px solid #adc4e1;border-radius:5px;background:#e7f0fb;color:#234e79;overflow:hidden;text-align:left;z-index:2}.fleet-period strong,.fleet-period small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;font-size:11px}.fleet-period small{font-size:10px;font-weight:400}.fleet-period.out{background:#b7132b;color:#fff;border-color:#b7132b}.fleet-period.maintenance{background:repeating-linear-gradient(135deg,#515158 0 8px,#5b5b62 8px 9px);border-color:#515158;color:white}.fleet-period.requested{background:#fff1cd;border-style:dashed;border-color:#c89e42;color:#755408}.fleet-period.returned{background:#e9ecef;color:#62676e;border-color:#d1d5da}.fleet-period.late{background:#fff0f1;color:#ad102a;border:2px dashed #b7132b}.fleet-unassigned-title{font-size:14px;margin-top:20px}
@media(max-width:700px){.fleet-calendar{--fleet-name:112px;--fleet-day:88px}.fleet-row-name{padding:8px;font-size:11px}.fleet-calendar-scroll{max-height:55dvh}.schedule-mode .plan-navigation button{font-size:11px;padding:7px;white-space:nowrap}.fleet-period-controls{flex-wrap:wrap}}
@media(max-width:700px){.fleet-hint{display:none}.fleet-range{margin:8px 0 6px}.fleet-legend{margin-bottom:10px;font-size:10px;gap:6px 10px}.fleet-row-name strong{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.fleet-period-controls{margin-top:4px}}
.fleet-date-compact{display:none}
@media(max-width:700px){.fleet-calendar[data-days="7"]{--fleet-day:calc((100vw - 146px) / 7)}.fleet-calendar[data-days="7"] .fleet-date-full{display:none}.fleet-calendar[data-days="7"] .fleet-date-compact{display:block}.fleet-calendar[data-days="7"] .fleet-period{padding:5px}.fleet-calendar[data-days="7"] .fleet-period small{font-size:9px}.fleet-calendar[data-days="7"] .fleet-day-cell{font-size:9px}}
.schedule-mode .vehicle-board.fleet-timeline-board{display:flex;flex-direction:column;gap:0;overflow:auto}.fleet-timeline-board> *{flex-shrink:0}.fleet-timeline-board>.fleet-calendar-scroll{flex:1 1 auto;min-height:150px;max-height:none}.fleet-unassigned-link{margin-top:8px;min-height:38px;text-align:left;background:#fff9eb;border:1px solid #ead7a5;border-radius:6px;padding:8px;font-size:12px}

/* v16: compact workflow forms and clear fleet actions */
.form-section{border:1px solid #e3e3e5;border-radius:10px;padding:0 12px;margin:10px 0;background:#fff;min-width:0}.form-section>summary{min-height:48px;display:flex;align-items:center;font-size:14px;font-weight:600;cursor:pointer;list-style:none;gap:8px}.form-section>summary:after{content:'＋';margin-left:auto}.form-section[open]>summary:after{content:'−'}.form-section[open]{padding-bottom:12px}.form-section>label{display:block;margin:12px 0}.form-section fieldset{min-width:0}.intake-summary{font-size:13px;line-height:1.7;background:#f7f7f8;border-radius:8px;padding:12px;margin:10px 0;white-space:pre-line;overflow-wrap:anywhere}.requirement-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;border:0;padding:8px 0;margin:0;min-width:0}.requirement-row legend{font-size:14px;padding:0;margin-bottom:5px}.requirement-option{display:flex!important;align-items:center;justify-content:center;gap:8px;min-height:44px;margin:0!important;border:1px solid #d8d8dc;border-radius:8px;font-size:14px;cursor:pointer}.requirement-option:has(input:checked){border-color:#bc152b;background:#fff1f3;color:#a61125}.requirement-option input{width:18px!important;height:18px;margin:0;accent-color:#bc152b}.legend-late:before{background:#fff0f1;border:1px dashed #b7132b!important}.fleet-period-controls button{min-height:44px}
@media(max-width:700px){.form-section .people-checks{max-height:210px;overflow:auto}.form-section input,.form-section textarea{font-size:16px;max-width:100%;box-sizing:border-box}.requirement-row{gap:6px}.schedule-mode #vehicle-tools>button{min-height:44px}.fleet-calendar[data-days="31"]{--fleet-day:100px}}
#vehicle-dialog{overflow:hidden}#vehicle-form{display:flex;flex-direction:column;max-height:90dvh}#vehicle-form>.dialog-header,#vehicle-form>.dialog-footer,#vehicle-error{flex-shrink:0}#vehicle-form-body{overflow-y:auto;min-height:0;overscroll-behavior:contain}#vehicle-form>.dialog-footer:has(#vehicle-save[hidden]){display:none}#vehicle-error:empty{display:none}#vehicle-form>.dialog-footer{background:#fff}#vehicle-form>.dialog-header{background:#fff}#vehicle-form-body .requirement-row{margin:0}#vehicle-form-body:has(.requirement-row){gap:12px}
@media(max-width:700px){#vehicle-form{max-height:85dvh}#vehicle-form>.dialog-header,#vehicle-form>.dialog-footer{padding:14px 20px}#vehicle-form>.dialog-header h2{font-size:17px}#vehicle-form-body{padding:18px 20px}}

/* Contract delivery progress: compact summaries with touch-sized status controls. */
.delivery-progress-card{border-bottom:1px solid #e7e7e9;padding:10px 0;display:grid;gap:7px;min-width:0}
.delivery-progress-card small{white-space:pre-wrap;color:#626268}
.delivery-stamp-row{display:flex;gap:8px;overflow-x:auto;padding:4px 0 8px;max-width:100%}
.delivery-stamp-row .stamp-choice{min-height:44px;flex:0 0 auto;white-space:nowrap;padding:10px 14px}
.delivery-stamp-group{grid-column:1/-1;min-width:0;border-bottom:1px solid #eee;padding:8px 0}
.delivery-stamp-group strong{font-size:13px;display:block;margin-bottom:4px}
.stamp-options:has(.delivery-stamp-group){grid-template-columns:repeat(2,minmax(0,1fr));max-height:min(40dvh,340px)}
.stamp-options:has(.delivery-stamp-group)>.primary{font-size:13px;min-height:44px;padding:10px}

/* Delivery progress separates required workflow from additional jobs. */
.delivery-shortcuts{display:flex;gap:6px;flex:0 0 auto;padding:0 14px;border-bottom:1px solid var(--line);background:#fff;min-width:0}
.delivery-shortcuts[hidden]{display:none}
.delivery-open,.delivery-settings{border:0;background:#fff;color:var(--ink);min-height:44px;padding:8px 10px;font-size:12px;font-weight:650;text-align:left}
.delivery-open{flex:1;color:var(--red)}
.delivery-settings{flex:0 0 auto;text-decoration:underline;text-underline-offset:3px}
.vehicle-card-wrap{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff}
.vehicle-card-wrap .vehicle-card{width:100%;border:0;border-radius:0;margin:0}
.delivery-card-actions{display:flex;gap:4px;padding:0 8px;border-top:1px solid var(--line)}
.delivery-breakdown{font-size:12px;color:#606066;line-height:1.8;margin:0 0 12px;overflow-wrap:anywhere}
.delivery-setup-pending{border-left:3px solid var(--red);background:#fff8f8;padding:12px;margin:12px 0;font-size:13px}
.delivery-setup-pending p{margin:6px 0;line-height:1.6}
.delivery-filters{display:flex;gap:8px;margin:16px 0 8px}
.delivery-filters button{min-height:44px;flex:1}
.delivery-filters [aria-pressed=true]{background:#252529;color:#fff;border-color:#252529}
.delivery-group-title{font-size:15px;margin:22px 0 8px}
.delivery-item-meta{display:flex;align-items:center;gap:10px;font-size:11px}
.delivery-kind{padding:3px 7px;border-radius:4px;background:#f1f1f3;color:#45454b}
.delivery-empty{display:block;color:#707078;margin:0 0 12px}
.delivery-progress-card .linked-row{margin:0;overflow-wrap:anywhere}
@media(max-width:600px){.delivery-shortcuts{padding:0 6px}.delivery-open,.delivery-settings{padding:8px 6px;font-size:12px}}

.active-chat:has(> .delivery-shortcuts:not([hidden])){grid-template-rows:auto auto minmax(0,1fr) auto}
.vehicle-card-wrap{margin-bottom:10px}

#vehicle-form-body:has(>.delivery-filters){gap:10px}
#vehicle-form-body:has(>.delivery-filters)>.linked-readiness,#vehicle-form-body:has(>.delivery-filters)>.intake-summary{margin:0;padding:10px 12px}
#vehicle-form-body:has(>.delivery-filters)>.delivery-breakdown{margin:0}
#vehicle-form-body:has(>.delivery-filters)>.delivery-setup-pending{margin:0;padding:8px 10px}
#vehicle-form-body:has(>.delivery-filters)>.delivery-filters{margin:0}
#vehicle-form-body:has(>.delivery-filters)>.delivery-group-title{margin:12px 0 0}

/* Keep the vehicle identity, unread count, and delivery action together. */
.vehicle-card-wrap .vehicle-card-heading{flex-direction:row;align-items:center;padding:12px 14px;gap:8px}
.vehicle-card-heading .unread-badge{flex-shrink:0}
.vehicle-card-heading strong{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;line-height:1.5}
.vehicle-card-heading .vehicle-model{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden;line-height:1.5}
.delivery-card-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0 12px 10px;border:0}
.delivery-card-actions>.delivery-open,.delivery-card-actions>.delivery-settings{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:3px;min-width:0;min-height:56px;padding:7px 4px;border:1px solid #d7d7dc;border-radius:8px;text-align:center;text-decoration:none;font-size:13px;line-height:1.4}
.delivery-card-actions>.delivery-open{border-color:#d9a3aa;background:#fff8f8;color:var(--red)}
.delivery-card-actions small{font-size:11px;font-weight:400}
.delivery-card-actions>.delivery-open:only-child{grid-column:1/-1}
.delivery-requirements-help{font-size:12px;line-height:1.7;color:#626268;margin:8px 0;white-space:pre-line}

/* Keep routine actions visible; disclose options in context. */
.schedule-actions{display:flex;width:100%;gap:8px}.schedule-actions>button{flex:1;min-height:44px}
.fleet-view-summary{display:block;color:var(--muted);font-size:12px;margin:0 0 6px}
.schedule-mode .plan-navigation {
  max-width: 600px;
  gap: 6px;
  padding-bottom: 12px;
}
.schedule-mode .plan-navigation > button { min-width: 44px; min-height: 44px; }
.schedule-mode .plan-navigation > .schedule-date-step {
  width: 44px;
  padding: 0;
  font-size: 20px;
  line-height: 1;
}
.schedule-mode .plan-navigation > input {
  height: 44px;
  padding: 0 8px;
  border-radius: 9px;
  font-size: 16px;
  color: var(--ink);
}
.schedule-mode .schedule-tabs button { min-height: 44px; }
.schedule-mode .schedule-actions { max-width: 600px; }
.schedule-mode #vehicle-tools { padding-inline: 16px; }
.delivery-card-actions{display:block}.delivery-card-actions .delivery-open{width:100%;flex-direction:row;justify-content:space-between;min-height:44px;padding:10px 12px}
.delivery-shortcuts .delivery-open{width:100%;text-align:left}
details.delivery-progress-card{display:block;padding:0}details.delivery-progress-card>summary{padding:12px 0}details.delivery-progress-card[open]{padding-bottom:12px}details.delivery-progress-card>small{display:block;margin:8px 0}
.delivery-item-heading{display:flex;align-items:center;gap:8px;min-height:48px;list-style:none;cursor:pointer;font-size:14px}.delivery-item-heading::-webkit-details-marker{display:none}.delivery-item-heading:after{content:'⌄';margin-left:auto;flex-shrink:0}.delivery-item-heading strong{font-weight:600;overflow-wrap:anywhere}.delivery-item-status{font-size:12px;color:var(--muted);flex-shrink:0}.delivery-item-heading:focus-visible{outline:2px solid #bc152b;outline-offset:2px}.delivery-progress-card[open]>.delivery-item-heading:after,.delivery-stamp-group[open]>.delivery-item-heading:after{content:'⌃'}
.delivery-progress-card>.delivery-item-meta,.delivery-progress-card>.delivery-stamp-row{margin-bottom:8px}.delivery-stamp-group>summary{padding:6px 0}

#vehicle-form-body .check-line[hidden]{display:none!important}

/* Preview only: retain the v17.4 layout, colors and type sizes. */
@media(max-width:700px){
 .sidebar-heading{margin:0 20px 16px}
 .search{margin:0 20px 12px}
 .filters{margin:0 20px 12px}
 .sidebar-heading .new-button{min-height:44px}
 .filter{min-height:40px}
 .header-settings{width:40px;height:40px}
 .vehicle-tools{gap:8px;padding-left:16px;padding-right:16px}
 .vehicle-tools>button,.vehicle-nav button{min-height:44px}
 .send{height:44px;min-height:44px}
}

/* Photo controls share the existing attachment entry and compact vehicle identity. */
#file-draft-preview{width:64px;height:64px;object-fit:cover;border-radius:8px;flex-shrink:0}#file-draft-name{overflow-wrap:anywhere;min-width:0}
.message-photo{display:block;width:280px;border:0;padding:0;background:transparent;cursor:zoom-in;max-width:100%;border-radius:10px;overflow:hidden;min-height:44px}
.message-photo img{display:block;max-width:100%;width:100%;height:auto;aspect-ratio:4/3;object-fit:contain;border-radius:10px}.bubble:has(.message-photo){padding:5px}.bubble:has(.message-photo) p{padding:5px 7px}
.photo-dialog{width:min(420px,calc(100vw - 24px));max-height:90dvh;overflow:auto}.attachment-options{padding:4px 20px 20px;display:grid;gap:4px}.attachment-options button{min-height:52px;border:0;border-bottom:1px solid #eee;background:white;text-align:left;padding:12px;font:inherit;color:var(--text,#222)}
.photo-editor-body{padding:16px 20px;display:flex;flex-wrap:wrap;gap:14px;align-items:center}.photo-editor-body img{display:block;width:100%;max-height:40dvh;object-fit:contain;border-radius:10px}.photo-editor-body .form-error{width:100%;margin:0}.photo-editor-body p{font-size:14px;color:#65666c}.photo-editor-body .text-button{border:0;background:transparent;color:#666;padding:12px;min-height:44px}
.photo-viewer {
  width: min(1000px, 100vw);
  max-width: 100vw;
  max-height: 100dvh;
  padding: 12px;
  background: #161719;
  color: white;
  border: 0;
}
.photo-viewer[open] { display: flex; flex-direction: column; }
.photo-viewer-toolbar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
}
.photo-viewer-toolbar a { color: white; padding: 10px; font-size: 14px; }
.photo-viewer-toolbar button { color: white; font-size: 28px; }
.photo-viewer img {
  display: block;
  min-height: 0;
  max-width: 100%;
  max-height: calc(100dvh - 100px);
  margin: auto;
  object-fit: contain;
}
.photo-caption {
  flex: 0 0 auto;
  max-height: min(28dvh, 12rem);
  margin: 12px 0 0;
  padding: 10px 12px;
  overflow-y: auto;
  background: #27282b;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
#vehicle-photo-filename {
  width: 100%;
  margin: -4px 0 0;
  overflow-wrap: anywhere;
}
#discard-file { width: 44px; height: 44px; flex: 0 0 44px; }
.vehicle-photo-thumb{width:60px;height:48px;object-fit:cover;border-radius:7px;flex-shrink:0}.vehicle-summary-top .vehicle-photo-control{margin:0;padding:0;min-width:60px;min-height:48px;border:1px solid #e4e4e8;border-radius:8px;background:#fafafa;color:#666;font-size:11px}.vehicle-photo-control img{display:block}.vehicle-card-label{display:flex;flex-direction:column;gap:5px;min-width:0;flex:1}
.photo-dialog [hidden],#file-draft-preview[hidden],#file-draft-icon[hidden]{display:none!important}

.vehicle-photo-shortcut {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  color: var(--muted);
  background: #eeeef0;
}
.vehicle-photo-shortcut > img { width: 100%; height: 100%; border-radius: inherit; }
.vehicle-photo-edit-badge {
  position: absolute;
  right: -3px;
  bottom: -3px;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 1px solid white;
  border-radius: 50%;
  color: white;
  background: var(--red);
  pointer-events: none;
}
.vehicle-photo-edit-badge svg { width: 12px; height: 12px; }
.vehicle-card-identity {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  padding-left: 14px;
}