:root {
  color-scheme:dark;
  --ink:#ededed;
  --muted:#ababab;
  --line:#ffffff17;
  --blue:#0a84ff;
  --link:#64adff;
  --soft:#303030;
  --surface:#2b2b2b;
  --bg:#242424;
  --control:#454545;
  --control-hover:#505050;
  --control-border:#ffffff14;
  --field:#1d1d1d;
  --secondary:#c0c0c0;
  --accent-soft:#0a84ff1c;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:14px;
  color:var(--ink);
  background:var(--bg)
}
* {
  box-sizing:border-box
}
body {
  margin:0
}
button,input,select,textarea {
  font:inherit
}
button,a,input,textarea,select {
  -webkit-tap-highlight-color:transparent
}
button,a {
  touch-action:manipulation
}
button {
  cursor:pointer;
  border:1px solid var(--control-border);
  background:var(--control);
  color:var(--ink);
  border-radius:6px;
  padding:6px 11px;
  font-weight:500;
  white-space:nowrap
}
button:hover {
  background:var(--control-hover)
}
button:disabled {
  opacity:.5;
  cursor:default
}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible {
  outline:3px solid var(--blue);
  outline-offset:3px
}
.primary {
  background:var(--blue);
  color:#fff;
  border-color:var(--blue)
}
.primary:hover {
  background:#0074e8
}
a {
  color:var(--link);
  text-decoration:none
}
a:hover {
  text-decoration:underline
}
.app-bar {
  height:44px;
  border-bottom:1px solid var(--line);
  background:var(--soft);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 24px
}
.brand {
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--ink);
  font-weight:650;
  font-size:15px;
  letter-spacing:-.3px
}
.brand:hover {
  text-decoration:none
}
.brand-mark {
  display:grid;
  place-items:center;
  width:26px;
  height:26px;
  border-radius:6px;
  background:var(--control);
  color:var(--ink);
  font-size:26px;
  line-height:1
}
main {
  max-width:1440px;
  padding:0 24px;
  margin:auto
}
.role-preview {
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  color:var(--muted);
  white-space:nowrap
}
.role-preview select {
  background:transparent;
  border:0;
  color:var(--secondary);
  font-size:12px;
  padding:6px 0
}
.case-navigation {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin:6px 0
}
.link-actions { display:flex; align-items:center; gap:8px }
.text-button {
  border:0;
  padding:4px 0;
  background:transparent;
  color:var(--muted);
  font-size:12px
}
.text-button:hover {
  background:transparent;
  color:var(--link)
}
.case-navigation .text-button {
  font-size:13px
}
.case-heading {
  margin:0 0 10px
}
h1 {
  font-size:22px;
  letter-spacing:-.5px;
  line-height:1.22;
  margin:0;
  font-weight:650;
  overflow-wrap:anywhere
}
h2 {
  font-size:15px;
  letter-spacing:-.2px;
  margin:0;
  font-weight:650
}
.muted {
  color:var(--muted)
}
.small {
  font-size:12px;
  line-height:1.5
}
.case-grid {
  display:grid;
  grid-template-columns:minmax(0,1fr) 320px;
  gap:20px;
  align-items:start
}
.listening {
  min-width:0
}
.mode-toolbar {
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:4px
}
.segmented {
  background:var(--soft);
  display:flex;
  border:1px solid var(--control-border);
  border-radius:7px;
  padding:2px;
  gap:2px;
  width:fit-content;
  margin:0
}
.segmented button {
  border:0;
  background:transparent;
  font-size:12px;
  padding:4px 12px;
  border-radius:5px;
  color:var(--muted)
}
.segmented button[aria-pressed=true] {
  background:#606060;
  color:var(--ink);
  box-shadow:0 1px 3px #0004
}
.video-shell {
  position:relative;
  background:var(--surface);
  border-radius:8px 8px 0 0;
  overflow:hidden;
  border:1px solid var(--line);
  border-bottom:0;
  aspect-ratio:16/9;
  display:flex;
  align-items:center;
  justify-content:center
}
video {
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
  background:var(--field)
}
.media-failure {
  position:absolute;
  inset:0;
  background:var(--soft);
  padding:30px;
  display:grid;
  place-items:center;
  text-align:center;
  color:var(--muted)
}
.playback-controls {
  border:1px solid var(--line);
  border-top:0;
  border-radius:0 0 8px 8px;
  background:var(--surface)
}
.transport {
  display:flex;
  gap:12px;
  align-items:center;
  padding:4px 8px
}
.visually-hidden {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
  border:0
}
.play {
  width:31px;
  height:31px;
  padding:0;
  display:grid;
  place-items:center;
  background:var(--control);
  border:0;
  border-radius:6px;
  color:#fff;
  font-size:12px
}
.play:hover {
  background:var(--control-hover)
}
input[type=range] {
  flex:1;
  min-width:30px;
  accent-color:var(--blue);
  height:4px
}
.time {
  font-size:11px;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
  color:var(--muted)
}
.volume-controls {
  display:flex;
  align-items:center;
  flex:0 0 auto;
  gap:6px
}
.volume-controls .icon-button {
  display:grid;
  place-items:center;
  padding:4px;
  color:var(--muted)
}
#volume {
  flex:0 0 88px;
  width:88px;
  margin:0
}
.volume-value {
  width:43px;
  padding:4px 0;
  border:0;
  background:transparent;
  color:var(--muted);
  font-size:11px;
  font-weight:400;
  font-variant-numeric:tabular-nums
}
.icon-button {
  border:0;
  background:transparent;
  font-size:19px;
  padding:2px 5px
}
.recording-caption {
  white-space:nowrap;
  font-size:12px;
  color:var(--muted)
}
.privacy-note {
  border-top:1px solid var(--line);
  display:flex;
  gap:12px;
  align-items:center;
  padding-top:18px;
  margin-top:8px;
  color:var(--secondary);
  font-size:12px;
  line-height:1.7
}
.privacy-note>span {
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  border:1px solid var(--line);
  border-radius:50%;
  font-size:17px
}
.privacy-note p {
  margin:0
}
.privacy-note p span {
  color:var(--muted)
}
.conversation {
  border-left:1px solid var(--line);
  padding-left:20px;
  padding-top:4px;
  min-width:0
}
.context p {
  line-height:1.5;
  font-size:13px;
  color:var(--secondary);
  margin:6px 0 12px;
  white-space:pre-wrap;
  overflow-wrap:anywhere
}
.updates-section {
  border-top:1px solid var(--line);
  padding-top:10px
}
.updates-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:8px
}
#update-count {
  color:var(--muted);
  font-weight:400;
  font-size:12px;
  margin-left:4px
}
#updates {
  max-height:300px;
  overflow:auto
}
.update {
  border-left:2px solid var(--control);
  padding-left:12px;
  margin:0 0 12px
}
.update-header {
  display:flex;
  justify-content:space-between;
  gap:8px;
  font-size:11px;
  color:var(--muted)
}
.update-header strong {
  color:var(--secondary);
  font-weight:650
}
.update p {
  font-size:13px;
  line-height:1.55;
  margin:8px 0;
  white-space:pre-wrap;
  overflow-wrap:anywhere
}
.update video,.update audio {
  max-height:150px;
  width:100%;
  border-radius:6px
}
.update a {
  display:block;
  font-size:11px;
  margin-top:6px;
  overflow-wrap:anywhere
}
#reply-form {
  border-top:1px solid var(--line);
  padding-top:10px
}
#updates:empty { display:none }
.updates-section:has(#updates:empty) + #reply-form { border-top:0; padding-top:0 }
#case-context[hidden] + .updates-section { border-top:0; padding-top:0 }
label {
  display:block;
  font-size:12px;
  font-weight:500;
  color:var(--secondary)
}
textarea,input[type=text] {
  width:100%;
  border:1px solid var(--line);
  border-radius:6px;
  background:var(--field);
  padding:11px;
  color:var(--ink);
  line-height:1.5;
  resize:vertical
}
textarea::placeholder,input::placeholder {
  color:var(--muted)
}
#reply-form textarea {
  margin-top:0;
  min-height:64px;
  padding:8px;
  font-size:13px
}
.reply-actions {
  display:flex;
  justify-content:space-between;
  gap:8px;
  margin-top:6px
}
.reply-actions button {
  font-size:12px
}
#attach {
  display:inline-flex;
  align-items:center;
  gap:7px
}
#attach svg {
  flex:none
}
.attachment {
  background:var(--accent-soft);
  border-radius:6px;
  padding:6px 9px;
  margin-top:8px;
  font-size:12px
}
.attachment-heading { display:flex; justify-content:space-between; align-items:center; gap:8px; min-width:0 }
#attachment-preview audio,#attachment-preview video { display:block; width:100%; max-height:180px; border-radius:6px; margin:4px 0 }
#reply-error { margin:8px 0 }
#upload-progress { margin:8px 0 0 }
.attachment span {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}
.attachment button {
  border:0;
  background:none;
  padding:2px
}
footer {
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-top:1px solid var(--line);
  margin:12px 0 0;
  padding:6px 0;
  color:var(--muted);
  font-size:11px
}
footer button {
  font-size:11px!important
}
.section-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin:20px 0
}
.case-item {
  display:flex;
  align-items:center;
  gap:18px;
  padding:14px 0;
  border-bottom:1px solid var(--line);
  width:100%;
  border-radius:0;
  text-align:left;
  border-top:0;
  border-left:0;
  border-right:0;
  background:transparent;
  white-space:normal;
  overflow-wrap:anywhere
}
.case-item>span {
  min-width:0
}
.case-item .sound-icon {
  display:grid;
  place-items:center;
  background:var(--control);
  color:var(--secondary);
  width:46px;
  height:46px;
  border-radius:10px;
  font-size:24px;
  flex:none
}
.case-item strong {
  display:block;
  font-size:16px;
  font-weight:600
}
.case-item small {
  display:block;
  font-size:12px;
  color:var(--muted);
  margin-top:6px
}
.case-item .arrow {
  margin-left:auto;
  color:var(--muted)
}
.error {
  font-size:13px;
  color:#ffb8ae;
  border:1px solid #ff817247;
  background:#422c29;
  padding:12px;
  border-radius:8px;
  margin:10px 0
}
dialog {
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--surface);
  color:var(--ink);
  padding:20px;
  width:min(510px,calc(100vw - 32px));
  box-shadow:0 20px 80px #0008;
  max-height:calc(100dvh - 32px);
  overflow:auto
}
dialog::backdrop {
  background:#0006;
  backdrop-filter:blur(3px)
}
.dialog-heading {
  display:flex;
  align-items:center;
  justify-content:space-between
}
.dialog-heading h2 {
  font-size:21px
}
dialog label {
  margin:12px 0 6px
}
dialog .muted {
  font-size:13px;
  line-height:1.5
}
dialog label .muted {
  font-size:12px;
  font-weight:400;
  float:right
}
.file-picker {
  padding:16px 12px;
  border:1px dashed #777;
  border-radius:9px;
  text-align:center;
  cursor:pointer;
  background:var(--soft);
  overflow-wrap:anywhere
}
.file-picker span {
  display:block;
  color:var(--muted);
  font-weight:400;
  font-size:11px;
  margin-top:8px
}
.dialog-actions {
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:14px
}
#toast {
  position:fixed;
  bottom:24px;
  left:50%;
  transform:translateX(-50%);
  padding:12px 20px;
  background:var(--control);
  color:var(--ink);
  border-radius:8px;
  box-shadow:0 5px 22px #0002;
  font-size:13px;
  max-width:90vw;
  text-align:center
}
[hidden] {
  display:none!important
}
@media(min-width:1400px) {
  main {
    padding:0 24px
  }
  .case-grid {
    grid-template-columns:minmax(0,1fr) 340px;
    gap:24px
  }
  .conversation {
    padding-left:24px
  }
}
@media(max-width:900px) {
  button,select,.brand {
    min-height:44px
  }
  textarea,input[type=text],.role-preview select,#reply-form textarea {
    font-size:16px
  }
  .transport {
    display:grid;
    grid-template-columns:44px minmax(0,1fr) auto;
    gap:0 8px;
    padding:4px 8px
  }
  .play {
    width:44px;
    height:44px;
    font-size:15px
  }
  input[type=range] {
    height:44px
  }
  .volume-controls {
    grid-column:1 / -1;
    display:grid;
    grid-template-columns:44px minmax(0,1fr) auto;
    gap:8px
  }
  #volume {
    width:100%
  }
  .volume-value {
    width:auto;
    min-width:44px;
    font-size:12px
  }
  .time {
    font-size:12px
  }
  #seek {
    width:100%;
    margin:0
  }
  .app-bar {
    padding:env(safe-area-inset-top) max(12px,env(safe-area-inset-right)) 0 max(12px,env(safe-area-inset-left));
    height:calc(48px + env(safe-area-inset-top));
    gap:12px
  }
  main {
    padding:0 max(12px,env(safe-area-inset-right)) env(safe-area-inset-bottom) max(12px,env(safe-area-inset-left))
  }
  .case-grid {
    grid-template-columns:1fr;
    gap:12px
  }
  .conversation {
    border-left:0;
    padding-left:0;
    padding-top:0
  }
  .case-heading {
    margin-bottom:8px
  }
  h1 {
    font-size:22px;
    letter-spacing:-.5px
  }
  .case-navigation {
    margin:2px 0 6px;
    gap:12px
  }
  .segmented {
    flex:1;
    min-width:0
  }
  .segmented button {
    flex:1;
    font-size:14px
  }
  .privacy-note {
    display:none
  }
  .recording-caption {
    font-size:11px;
    line-height:1.5;
    margin:0
  }
  .context p,.update p {
    font-size:15px;
    line-height:1.45
  }
  .context p {
    margin:6px 0 10px
  }
  .updates-section {
    padding-top:0
  }
  .updates-heading {
    margin-bottom:4px
  }
  #updates {
    max-height:none;
    overflow:visible
  }
  .update-header {
    flex-wrap:wrap;
    font-size:12px
  }
  .update a {
    display:flex;
    align-items:center;
    min-height:44px;
    font-size:13px
  }
  #reply-form {
    padding-top:8px
  }
  #reply-form textarea {
    display:block;
    min-height:66px
  }
  .reply-actions button {
    font-size:14px
  }
  #post {
    min-width:76px
  }
  .attachment {
    padding:2px 4px 2px 10px
  }
  .attachment button {
    flex:none;
    min-width:44px
  }
  .section-heading {
    gap:12px;
    flex-wrap:wrap;
    margin:12px 0 8px
  }
  .section-heading .primary {
    font-size:14px
  }
  .role-preview {
    font-size:11px;
    gap:4px
  }
  .case-item {
    gap:12px;
    padding:12px 0
  }
  footer {
    gap:8px;
    flex-wrap:wrap;
    margin-top:12px;
    padding:2px 0
  }
  .app-bar .brand {
    font-size:15px
  }
  dialog {
    padding:16px;
    width:min(510px,calc(100vw - 24px));
    max-height:calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom))
  }
  #close-dialog {
    min-width:44px
  }
  dialog label {
    font-size:14px
  }
  dialog label .muted {
    float:none;
    margin-left:4px
  }
  .dialog-actions {
    gap:8px;
    flex-wrap:wrap
  }
  #toast {
    bottom:calc(16px + env(safe-area-inset-bottom))
  }
}
@media(min-width:600px) and (max-width:900px) {
  .transport { display:flex; gap:10px }
  .volume-controls { display:flex; gap:6px }
  #volume { width:88px; flex:0 0 88px }
}