:root{ --ink:#e8eef7; --bg:#0f131a; --card:#151b24; --muted:#93a0b4; --accent:#7DF9FF }
*{box-sizing:border-box} body{margin:0;background:var(--bg);color:var(--ink);font-family:Roboto,system-ui,Arial}
.sw-header{padding:16px 20px;border-bottom:1px solid #1f2732}
.container{max-width:900px;margin:20px auto;padding:0 12px}
.card{background:var(--card);border:1px solid #1f2732;border-radius:14px;padding:16px;margin-bottom:16px}
.row{display:flex;gap:16px;flex-wrap:wrap}
.col{flex:1;min-width:240px}
label{display:block;font-size:12px;color:var(--muted);margin-bottom:6px}
.value{font-weight:600}
textarea{width:100%;min-height:120px;border-radius:10px;border:1px solid #263043;background:#0e1219;color:var(--ink);padding:10px}
.actions{display:flex;gap:12px;margin-top:12px}
button{border:0;border-radius:10px;padding:10px 14px;font-weight:600;background:var(--accent);color:#001018;cursor:pointer}
button:disabled{opacity:.55;cursor:not-allowed}
.status{margin-top:10px;color:#9bd6ff}
.timeline .item{padding:10px;border:1px solid #263043;border-radius:10px;background:#0e1219;margin-bottom:8px}
.list .rowline{display:flex;justify-content:space-between;border-bottom:1px dashed #263043;padding:10px 0}
.muted{color:#93a0b4}
.chat-list{max-height:340px;overflow:auto;border:1px solid #263043;border-radius:10px;background:#0e1219;padding:10px;margin-top:8px}
.chat-msg{margin-bottom:10px;padding:8px 10px;border-radius:10px;max-width:80%}
.chat-me{background:#153042; margin-left:auto}
.chat-them{background:#1b2330; margin-right:auto}
.chat-meta{font-size:11px;color:#93a0b4;margin-top:4px}
.chat-input{display:flex;gap:8px;margin-top:8px}
.chat-input input{flex:1;border-radius:10px;border:1px solid #263043;background:#0e1219;color:#e8eef7;padding:10px}

/* Grayed out button when it's clicked */
#contactAttorneyBtn:disabled {
  background-color: #808080;  /* Gray out the button */
  color: #f0f0f0;
  cursor: not-allowed;
}

/* Style for the contact status message */
#contactStatusMessage {
  font-size: 0.9em;
  color: #cfeff5;
}


#eng-app, #attn-app { max-width: 980px; margin: 0 auto; }
.list .req { border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; padding: 10px; margin: 8px 0; cursor: pointer; }
.list .req.chosen { outline: 2px solid rgba(0,255,255,0.5); }
.row { display:flex; gap:8px; align-items:center; justify-content:space-between; }
.muted { opacity:.7; font-size:.9em; }
.small { font-size:.9em; }
.badge { padding:2px 8px; border-radius:14px; background:rgba(0,255,255,.12); }
.note, .decline { margin-top:6px; }
.chatlog { border:1px solid rgba(255,255,255,0.1); border-radius:12px; padding:8px; height:260px; overflow:auto; }
.msg { margin:6px 0; }
.msg .bubble { display:inline-block; padding:6px 10px; border-radius:12px; background:rgba(255,255,255,.06); }
.msg.mine .bubble { background:rgba(0,255,255,.12); }
.msg .meta { font-size:.8em; opacity:.7; margin-top:2px; }
.chatbox { display:flex; gap:8px; margin-top:6px; }
.chatbox input { flex:1; }
.btn-primary, .btn-danger, .btn-success { padding:8px 12px; border-radius:10px; border:none; cursor:pointer; }
.btn-primary { background:#00bcd4; }
.btn-danger { background:#e53935; }
.btn-success { background:#43a047; }
.empty { opacity:.7; padding:8px; border:1px dashed rgba(255,255,255,.2); border-radius:8px; }


/* New ui layout   */
/* Layout scaffolding */
.flow-grid { display: grid; gap: 16px; }
.stepper-card { padding-bottom: 6px; }
.card-title { margin-top: 0; margin-bottom: 10px; }

.work-area {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 16px;
}
@media (max-width: 960px) {
  .work-area { grid-template-columns: 1fr; }
}

/* Stepper */
.stepper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  list-style: none;
  gap: 8px;
  margin: 0;
  padding: 0;
  position: relative;
}
.stepper .step {
  display: flex; align-items: center; gap: 10px;
  position: relative; padding: 8px 10px;
  border-radius: 12px; background: #0e1219; border: 1px solid #263043;
}
.stepper .step .dot {
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 700;
  background: rgba(125,249,255,.18); color: var(--ink);
}
.stepper .step.is-done .dot { background: var(--accent); color: #001018; }
.stepper .step.is-current { outline: 2px solid rgba(125,249,255,.55); }
.stepper .label { font-weight: 600; font-size: 0.95rem; }

/* List vs Details */
.list-card { min-height: 420px; }
.detail-card { min-height: 420px; display: grid; grid-template-rows: auto auto 1fr; gap: 10px; }
.sel-summary {
  border: 1px dashed rgba(255,255,255,.2); border-radius: 10px; padding: 8px;
}
.sel-summary.empty { opacity: .7; }

/* Tabs */
.tabs { display: flex; gap: 6px; }
.tab-btn {
  background: #0e1219; color: var(--ink);
  border: 1px solid #263043; border-radius: 10px;
  padding: 8px 12px; font-weight: 600; cursor: pointer;
}
.tab-btn.active { background: rgba(125,249,255,.18); border-color: var(--accent); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* Chat + confirm polish */
.chat-input { position: sticky; bottom: 0; background: #0e1219; padding-bottom: 8px; }
.sticky-actions { position: sticky; bottom: 0; padding-top: 8px; background: linear-gradient(180deg, rgba(21,27,36,0), #151b24 50%); }

/* Request row highlight kept, add tighter rhythm */
.list .req { padding: 12px; }
.list .req .row { gap: 6px; }
.badge { font-weight: 600; }



/* 2nd ui attempt for mobile pones too  */
/* ===== Mobile & Android fit: safe areas, touch targets, keyboard-friendly heights ===== */

/* Use dynamic viewport units to avoid 100vh bugs on Android Chrome */
:root{
  --vh: 1dvh; /* fallback is modern dvh; we also set via JS */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}

/* Respect safe areas on notched devices */
body {
  padding-top: var(--safe-top);
  padding-right: var(--safe-right);
  padding-left: var(--safe-left);
  padding-bottom: calc(var(--safe-bottom) * 0.5); /* gentle bottom breathing room */
}

/* Header pinned (saves space and keeps title visible) */
.sw-header{
  position: sticky;
  top: 0;
  z-index: 5;
  background: linear-gradient(180deg, rgba(15,19,26,0.95), rgba(15,19,26,0.75));
  backdrop-filter: blur(4px);
}

/* Container width & gutters tuned for phones */
.container{
  max-width: 980px;
  padding-left: max(12px, var(--safe-left));
  padding-right: max(12px, var(--safe-right));
}

/* Touch targets: ensure 44px min height */
button, .tab-btn {
  min-height: 44px;
  padding: 10px 14px;
}

/* Inputs comfortable */
textarea, .chat-input input {
  min-height: 44px;
  font-size: 16px; /* prevents iOS/Android zoom on focus */
}

/* Two-column work area becomes 1 column on phones; 2 on landscape/tablets */
.work-area {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 12px;
}

/* Phone portrait defaults */
@media (max-width: 960px) {
  .work-area { grid-template-columns: 1fr; }
  .list-card, .detail-card { min-height: auto; }
  .stepper { grid-template-columns: 1fr 1fr; row-gap: 8px; }
  .tabs { overflow: auto; -webkit-overflow-scrolling: touch; }
  .tab-btn { flex: 0 0 auto; }
}

/* Landscape phones: keep the coveted split view */
@media (orientation: landscape) and (max-height: 500px) {
  .work-area { grid-template-columns: 0.9fr 1.1fr; }
  .card { padding: 12px; }
  .row { gap: 6px; }
  .compose-card .row .col { min-width: 180px; }
}

/* Scrollable regions with momentum; avoid whole-page bouncing */
.list-card { overflow: hidden; display: grid; grid-template-rows: auto 1fr auto; }
.list-card > #requests { overflow: auto; -webkit-overflow-scrolling: touch; }
.detail-card { overflow: hidden; }
.detail-card .tab-panel { max-height: calc(100 * var(--vh) - 280px); overflow: auto; -webkit-overflow-scrolling: touch; }

/* Chat area height for mobile, sticky input never covered by keyboard */
.chat-list {
  max-height: min(40vh, calc(40 * var(--vh)));
}
.chat-input {
  position: sticky;
  bottom: 0;
  padding-bottom: max(8px, var(--safe-bottom));
}

/* Confirm sticky action area */
.sticky-actions { bottom: max(0px, var(--safe-bottom)); }

/* Better “selected request” summary wrapping on small widths */
.sel-summary { word-wrap: break-word; overflow-wrap: anywhere; }

/* High-density list lines for landscape phones */
@media (orientation: landscape) and (max-height: 500px) {
  .list .req { padding: 10px; }
  .list .row { gap: 4px; }
}

/* Prevent layout shift when soft keyboard opens: keep cards compact */
.compose-card textarea { min-height: 96px; }

/* Reduce chrome for ultra-small devices */
@media (max-width: 360px) {
  .stepper .label { font-size: .85rem; }
  .card { padding: 12px; }
}

/* --- Presentation polish: badges + human timeline --- */
.badge {
  display:inline-block; padding:2px 8px; border-radius:999px;
  background:rgba(125,249,255,.14); border:1px solid rgba(125,249,255,.35);
  font-weight:600; font-size:.9rem;
}

.timeline .tl-item {
  border:1px solid #263043; background:#0e1219; border-radius:12px;
  padding:10px; margin-bottom:10px;
}
.timeline .tl-row {
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  font-size:0.95rem;
}
.timeline .tl-what { font-weight:700; }
.timeline .tl-when { color:var(--muted); font-variant-numeric: tabular-nums; }
.timeline .t-note { margin-top:6px; color:#cfe9ff; }
.timeline .t-decline { margin-top:6px; color:#ffb3b3; }

/* Higher-contrast decline button (if it appears here) */
.btn-decline, #attn-decline { background:#d9534f !important; color:#fff !important; }
.btn-decline:hover, #attn-decline:hover { filter:brightness(1.1); }


/* === Modern chat presentation (safe, additive) ========================== */
/* Container */
.chat-list{
  background: radial-gradient(1200px 600px at 20% -10%, rgba(125,249,255,.06), transparent 60%) #0e1219;
  border: 1px solid #273141;
  border-radius: 14px;
  padding: 14px 12px;
  max-height: 46vh;              /* keeps thread contained */
  overflow: auto;
  box-shadow: 0 6px 18px rgba(0,0,0,.35) inset;
  scroll-behavior: smooth;
}

/* Each message row */
.chat-msg{
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  margin: 12px 0;
  max-width: 80%;
  animation: chat-pop .18s ease-out;
}
@keyframes chat-pop { from { transform: translateY(4px); opacity:.0 } to { transform: none; opacity:1 } }

/* Side alignment */
.chat-msg.mine   { margin-left: auto; text-align: right; }
.chat-msg.theirs { margin-right: auto; text-align: left; }

/* Bubble itself (uses your existing .body element) */
.chat-msg .body{
  display: inline-block;
  padding: 10px 12px;
  border-radius: 14px;
  line-height: 1.35;
  letter-spacing: .15px;
  word-break: break-word;
  box-shadow: 0 2px 10px rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.06);
}

/* Colorways */
.chat-msg.theirs .body{
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
}
.chat-msg.mine .body{
  background: linear-gradient(180deg, rgba(125,249,255,.22), rgba(125,249,255,.14));
  color: #fff;
  border-color: rgba(125,249,255,.35);
}

/* Tiny “tail” hint */
.chat-msg.theirs .body::after,
.chat-msg.mine   .body::after{
  content:"";
  position: relative;
  display:inline-block;
  width: 0; height: 0;
  border: 6px solid transparent;
  top: 2px;
}
.chat-msg.theirs .body::after{ border-right-color: rgba(255,255,255,.08); left: 6px; }
.chat-msg.mine   .body::after{ border-left-color:  rgba(125,249,255,.28); right: 6px; }

/* Header (role + timestamp) into a clean pill */
.chat-msg .meta{
  font-size: 11.5px;
  opacity: .9;
  color: #cfe9ff;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(2px);
}
.chat-msg.mine .meta{
  margin-left: auto;
  background: rgba(125,249,255,.10);
  border-color: rgba(125,249,255,.28);
  color: #a7f4ff;
}

/* Optional tiny “role” chip stylization inside meta text */
.chat-msg .meta::before{
  content:"";
  width: 6px; height: 6px; border-radius: 50%;
  background: #9bb6ff;
  box-shadow: 0 0 8px rgba(155,182,255,.6);
}
.chat-msg.mine .meta::before{
  background: #297784;
  box-shadow: 0 0 10px rgba(79,232,255,.65);
}

/* Tighter grouping if same side speaks twice */
.chat-msg + .chat-msg.mine   { margin-top: 8px; }
.chat-msg + .chat-msg.theirs { margin-top: 8px; }

/* Subtle, slimmer scrollbar so the content stays the star */
.chat-list::-webkit-scrollbar{ width: 10px }
.chat-list::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.08);
  border-radius: 10px;
  border: 2px solid transparent;
  background-clip: padding-box;
}





  /* Minimal, modern pill */
  .sw-header .sw-back-pill{
    display:inline-flex; align-items:center; gap:8px;
    padding:6px 12px; border-radius:999px;
    border:1px solid rgba(0,0,0,.12);
    background: rgba(255,255,255,.6);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    text-decoration:none; font-size:0.92rem; line-height:1;
    color:#1d2433;
    box-shadow: 0 1px 2px rgba(0,0,0,.06);
    margin-top:8px;
  }
  .sw-header .sw-back-pill .chev{ font-weight:600; }
  @media (hover:hover){
    .sw-header .sw-back-pill:hover{
      background:rgba(255,255,255,.85);
      box-shadow:0 2px 6px rgba(0,0,0,.08);
    }
    .sw-header .sw-back-pill:active{
      transform: translateY(1px);
    }
  }



/* small helper styles */
.sw-select {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #00ffff33;
  background: #0f141b;
  color: #e9f6ff;
}
.sw-select:focus { outline: 2px solid #00ffff66; }


/* small helper styles */
.sw-select {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #00ffff33;
  background: #0f141b;
  color: #e9f6ff;
}
.sw-select:focus { outline: 2px solid #00ffff66; }


/* High-contrast active pill & badges */
.tab-btn.active {
  background: var(--accent);
  color: #001018;
  border-color: var(--accent);
}

.badge {
  background: rgba(125,249,255,.22);
  border: 1px solid rgba(125,249,255,.45);
  color: #e8ffff;
}

/* Stepper dots: brighter when active */
.stepper .step .dot { color: #e8ffff; }
.stepper .step.is-current .dot { background: var(--accent); color: #001018; }


/* === Final overrides for readability & mobile fit === */
.tab-btn.active {
  background: var(--accent);
  color: #001018;      /* dark text on light accent */
  border-color: var(--accent);
}

/* Let panels grow naturally on phones (avoid fixed caps that clip content) */
.detail-card .tab-panel {
  max-height: none;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

/* Chat area that breathes on phones & landscape */
.chat-list {
  max-height: min(50vh, calc(55 * var(--vh)));
  overflow: auto;
}





/* ===== FINAL fit-to-viewport guardrails (mobile + landscape) ===== */
html, body { max-width: 100%; overflow-x: hidden; }

.container, .card, .row, .work-area, .tabs, .stepper { min-width: 0; }
.card { width: 100%; }

/* Let long labels/titles break instead of pushing layout wide */
h1, h2, h3, .label, .badge { overflow-wrap: anywhere; word-break: break-word; }

/* Flex cols must be allowed to shrink on small screens */
.col { min-width: 0; flex: 1 1 240px; }

/* Tabs should wrap on narrow widths */
.tabs { flex-wrap: wrap; }
.tabs .tab-btn { flex: 1 1 auto; }

/* The inline min-width on the picker’s .col is too large for tiny phones.
   Override it safely here without editing your HTML inline style. */
#attn-picker-card .col { min-width: 220px; } /* default, matches your inline */
@media (max-width: 480px) {
  .col { flex: 1 1 100%; min-width: 0; }
  #attn-picker-card .col { min-width: 0 !important; width: 100%; }
}

/* Pills/tabs readability: no white text on light backgrounds */
.tab-btn.active {
  background: var(--accent);
  color: #001018;
  border-color: var(--accent);
}
.badge {
  background: rgba(125,249,255,.22);
  border: 1px solid rgba(125,249,255,.45);
  color: #0b2430;  /* darker text for contrast */
}
.badge.pending   { background:#fff3cd; color:#5f4500; }
.badge.accepted  { background:#c8e6c9; color:#0f3d19; }
.badge.declined  { background:#ffcdd2; color:#7f0b0b; }
.badge.confirmed { background:#a5d6a7; color:#0f3d19; }

/* Stepper on very narrow phones: ensure it never overflows */
@media (max-width: 420px){
  .stepper { grid-template-columns: 1fr 1fr; row-gap: 8px; }
  .stepper .label { font-size: .88rem; }
}