/* ===== chat.css - Messages-app mock (the chat container) ===== */

/* ---------- thread ---------- */
.chathead{
  background:#F7F7F9;border-bottom:.5px solid #C9C9CE;
  display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:2px 16px 8px;flex-shrink:0;position:relative;
}
.chathead .back{
  position:absolute;left:0;top:0;color:#0A84FF;font-size:26px;line-height:1;font-weight:400;
  background:none;border:0;cursor:pointer;padding:16px 20px;font-family:inherit;z-index:70;
  min-width:44px;min-height:44px;
}
button.back:active{opacity:.5}
.avatar{
  width:50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:20px;font-weight:600;color:#fff;flex-shrink:0;
}
.chathead .name{font-size:12.5px;font-weight:400;color:#000;display:flex;align-items:center;gap:2px}
.chathead .name .chev{color:#B0B0B5;font-size:11px}

.thread{
  flex:1;overflow-y:auto;padding:14px 12px 22px;background:#FFFFFF;
  display:flex;flex-direction:column;gap:2px;scroll-behavior:smooth;
  -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 20px),transparent);
  mask-image:linear-gradient(to bottom,#000 calc(100% - 20px),transparent);
}
.sysrow{text-align:center;font-size:11px;color:#8E8E93;margin:6px 24px 8px;line-height:1.4}
.sysrow b{color:#636366;font-weight:600}

.ctxcard{
  align-self:center;width:94%;background:#F2F7F4;border:1px solid #CFE5D9;
  border-radius:12px;padding:10px 14px;margin:6px 0 4px;
}
.ctxcard .clbl{font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:#0B8A6C;font-weight:700;margin-bottom:2px}
.ctxcard .ct{font-size:13.5px;font-weight:700}
.ctxcard .cs{font-size:12px;color:#5A6660;margin-top:1px}

.slabel{font-size:10.5px;color:#8E8E93;margin:10px 0 2px;padding:0 14px}
.slabel.right{text-align:right}
.msgrow{display:flex;margin-top:3px}
.msgrow.left{justify-content:flex-start}
.msgrow.right{justify-content:flex-end}
.bubble{
  max-width:78%;padding:8px 12px;border-radius:18px;font-size:14.5px;line-height:1.35;
  white-space:pre-wrap;
}
.bubble.gray{background:#E9E9EB;color:#000}
.bubble.blue{background:#0A84FF;color:#fff}
.bubble.green{background:#1F8F49;color:#fff}
/* The tail follows the SIDE, never the color. It used to be baked into .gray
   and .blue, so swapping which colour meant "me" put every tail on the wrong
   edge. Side is the thing a tail actually describes. */
.msgrow.left .bubble{border-bottom-left-radius:5px}
.msgrow.right .bubble{border-bottom-right-radius:5px}
.bubble.purple{background:#EFE7FD;color:#3B2A66;border-bottom-left-radius:5px}
.bubble.purple .drafttxt{display:block;margin-top:6px;font-style:italic;color:#5B3FA8}
.bubble.purple.tappable{cursor:pointer}
.pchips{display:flex;gap:6px;margin-top:8px}
.pchips span{border:1.5px solid #5B3FA8;color:#5B3FA8;background:#fff;font-size:11.5px;font-weight:600;padding:4px 10px;border-radius:999px}

.cardmsg{
  max-width:80%;margin-top:8px;align-self:flex-end;
  background:#F7F7F9;border:.5px solid #D8D8DD;border-radius:14px;padding:10px 14px;
}
.cardmsg .ctitle{font-size:13.5px;font-weight:700}
.cardmsg .csub{font-size:11.5px;color:#6B6B70;margin-top:2px}

.pillrow{
  flex-shrink:0;display:flex;gap:6px;padding:8px 10px 2px;background:#F7F7F9;
  border-top:.5px solid #C9C9CE;
}
.pill{
  appearance:none;border:1px solid #D1D1D6;background:#fff;border-radius:999px;
  padding:7px 11px;font:inherit;font-size:12.5px;font-weight:600;color:#4B3AA0;cursor:pointer;
  display:inline-flex;align-items:center;gap:5px;
;white-space:nowrap}
.pill:active{background:#EFE7FD}
.pill[disabled]{opacity:.45;pointer-events:none}
.pill.iconpill{padding:7px 12px;font-size:14px}
.inputbar{
  flex-shrink:0;display:flex;align-items:center;gap:8px;
  padding:8px 12px 26px;background:#F7F7F9;
}
.inputbar .plus{width:30px;height:30px;border-radius:50%;background:#E9E9EB;color:#7C7C82;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
.inputbar .field{
  flex:1;border:1px solid #C9C9CE;border-radius:999px;padding:6px 14px;
  font-size:14px;color:#B0B0B5;background:#fff;min-height:19px;
}
.inputbar .field.filled{color:#000}

/* ---------- agent sidebar overlay (legacy slide-up; superseded by inline agent mode) ---------- */
.scrim{position:absolute;inset:0;background:rgba(10,12,10,.30);z-index:38;border-radius:43px}
.overlay{
  position:absolute;left:0;right:0;bottom:0;top:84px;z-index:40;
  background:#FBFAFE;border-radius:22px 22px 43px 43px;
  display:flex;flex-direction:column;box-shadow:0 -10px 40px rgba(30,20,60,.35);
}
@media (prefers-reduced-motion: no-preference){
  .overlay{animation:slideup .25s ease}
  @keyframes slideup{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
}
.ovhead{
  display:flex;align-items:center;gap:10px;padding:14px 16px 10px;border-bottom:.5px solid #E2DDF0;flex-shrink:0;
}
.ovhead .ovav{width:34px;height:34px;border-radius:50%;background:#5B3FA8;color:#fff;display:flex;align-items:center;justify-content:center;font-size:15px}
.ovhead .ovt{flex:1}
.ovhead .ovname{font-size:14px;font-weight:700;color:#2C2050}
.ovhead .ovsub{font-size:11px;color:#8E86A8}
.ovhead .ovclose{appearance:none;border:0;background:#EFE7FD;color:#5B3FA8;width:38px;height:38px;border-radius:50%;font-size:17px;cursor:pointer;font-weight:700}
.ovmsgs{flex:1;overflow-y:auto;padding:14px 14px 8px;display:flex;flex-direction:column;gap:6px}
.ovmsgs .bubble.purple{background:#EFE7FD}
.ovmsgs .msgrow.right .bubble{background:#5B3FA8;color:#fff;border-bottom-right-radius:5px;border-radius:18px}
.ovbar{flex-shrink:0;display:flex;gap:8px;padding:8px 14px 26px}
.ovbar .field{flex:1;border:1px solid #D6CEEC;border-radius:999px;padding:7px 14px;font-size:13.5px;color:#A79EC2;background:#fff}

/* ---------- inbox ---------- */
.inbox{flex:1;overflow-y:auto;background:#fff;padding-bottom:30px}
.ibtop{display:flex;justify-content:space-between;align-items:center;padding:6px 16px 0}
.ibtitle{font-size:30px;font-weight:800;letter-spacing:-.02em}
.ibcompose{color:#0A84FF;font-size:21px}
.ibsearch{margin:10px 16px 2px;background:#E9E9EB;border-radius:10px;padding:7px 12px;color:#8E8E93;font-size:15px}
.ibtabs{display:flex;background:#E9E9EB;border-radius:9px;padding:2px;margin:12px 16px 4px}
.ibtab{
  flex:1;appearance:none;border:0;background:transparent;border-radius:7px;
  font:inherit;font-size:13px;font-weight:600;color:#1C1C1E;padding:6px 4px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:5px;
}
.ibtab[aria-selected="true"]{background:#FFFFFF;box-shadow:0 1px 3px rgba(0,0,0,.12)}
.ibbadge{background:#FF3B30;color:#fff;border-radius:999px;font-size:10.5px;font-weight:700;min-width:17px;height:17px;display:inline-flex;align-items:center;justify-content:center;padding:0 5px}
.ibnote{font-size:11.5px;color:#8E8E93;padding:12px 16px 2px;line-height:1.4}
.row.muted{opacity:.62}
.row.muted .rname{font-weight:500}
.sect{
  font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:#8E8E93;font-weight:700;
  padding:16px 16px 2px;display:flex;align-items:center;gap:6px;
}
.sect .dot{width:7px;height:7px;border-radius:50%;background:#1F8F49}
.row{display:flex;gap:10px;padding:9px 10px 0 16px;align-items:flex-start;cursor:default;position:relative}
.row.tap{cursor:pointer}
.row.tap:active{background:#F2F2F7}
.rav{
  width:45px;height:45px;border-radius:50%;color:#fff;font-weight:600;font-size:17px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px;position:relative;
}
.row.unread::before{
  content:"";position:absolute;left:5px;top:28px;width:9px;height:9px;border-radius:50%;background:#0A84FF;
}
.rbody{flex:1;min-width:0;border-bottom:.5px solid #E5E5EA;padding-bottom:9px}
.row:last-child .rbody{border-bottom:0}
.rline{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.rname{font-size:15px;font-weight:600;color:#000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rtime{font-size:12.5px;color:#8E8E93;flex-shrink:0}
.rtime .chev{color:#C7C7CC}
.rprev{font-size:13px;color:#8E8E93;line-height:1.35;margin-top:1px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rprev .ai{color:#7A5FC7;font-weight:600}

/* ---------- inbox chrome: compose + settings ---------- */
.ibactions{display:flex;align-items:center;gap:15px}
.ibbtn{appearance:none;border:0;background:transparent;cursor:pointer;padding:2px;display:flex;align-items:center;min-width:30px;min-height:30px;justify-content:center}
.ibbtn svg{display:block}
.ibbtn:active{opacity:.5}

/* ---------- inline agent (private) compose mode ---------- */
.youpriv-row{display:flex;flex-direction:column;align-items:flex-end}
.bubble.youpriv{background:#5B3FA8;color:#fff;border-bottom-right-radius:5px}
.agenthint{
  flex-shrink:0;font-size:11px;color:#8E8E93;text-align:center;line-height:1.35;
  padding:7px 14px 0;background:#F7F7F9;display:flex;align-items:center;justify-content:center;gap:5px;
}
.agenthint .sp{color:#5B3FA8;font-weight:700}
.inputbar.agentmode{background:#F5F1FC}
.pillrow.agentmode{background:#F5F1FC;border-top-color:#E2DDF0}
.inputbar.agentmode .field{border-color:#B79BEA;box-shadow:0 0 0 3px rgba(91,63,168,.20);color:#8E7CC0}
.inputbar.agentmode .plus{background:#EFE7FD;color:#5B3FA8}
.pill.iconpill.on{background:#5B3FA8;color:#fff;border-color:#5B3FA8}
.pill.suggest{color:#5B3FA8;border-color:#C9B8F0}
.sendbtn{width:30px;height:30px;border-radius:50%;background:#0A84FF;color:#fff;border:0;cursor:pointer;flex-shrink:0;display:none;align-items:center;justify-content:center;font-size:16px;font-weight:700}
.inputbar.cansend .sendbtn{display:flex}

/* ---------- agent settings panel ---------- */
.setpanel{flex:1;display:flex;flex-direction:column;background:#F2F2F7;min-height:0}
.sethead{display:flex;align-items:center;gap:6px;padding:8px 14px 10px;background:#F7F7F9;border-bottom:.5px solid #C9C9CE;flex-shrink:0;position:relative}
.sethead .back{color:#0A84FF;font-size:25px;line-height:1;background:none;border:0;cursor:pointer;padding:6px 8px 6px 0;font-family:inherit;min-height:40px}
.sethead .settitle{font-size:16px;font-weight:700}
.sethead .setgear{margin-left:auto;color:#8E8E93;font-size:13px}
.setbody{flex:1;overflow-y:auto;padding:12px 14px 30px}
.setintro{font-size:12px;color:#6B6B70;margin:0 2px 12px;line-height:1.45}
.setintro b{color:#000}
.audtabs{display:flex;gap:6px;overflow-x:auto;padding:0 2px 12px;scrollbar-width:none}
.audtabs::-webkit-scrollbar{display:none}
.audtab{flex-shrink:0;appearance:none;border:1px solid #D1D1D6;background:#fff;border-radius:999px;padding:7px 13px;font:inherit;font-size:12.5px;font-weight:600;color:#3A3A3C;cursor:pointer;white-space:nowrap}
.audtab[aria-pressed="true"]{background:#5B3FA8;color:#fff;border-color:#5B3FA8}
.setcard{background:#fff;border-radius:12px;padding:13px 14px;margin-bottom:11px}
.setcard .slbl{display:block;font-size:11px;font-weight:700;color:#5B3FA8;letter-spacing:.05em;text-transform:uppercase;margin-bottom:7px}
.setcard textarea{width:100%;border:1px solid #D8D8DD;border-radius:9px;padding:9px 11px;font:inherit;font-size:13px;line-height:1.45;color:#000;resize:none;background:#FBFBFD;-webkit-appearance:none}
.setcard textarea:focus{outline:none;border-color:#5B3FA8;box-shadow:0 0 0 3px rgba(91,63,168,.15)}
.filterrow{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:9px}
.filterval{font-size:13px;font-weight:700;color:#5B3FA8}
.setcard input[type=range]{width:100%;accent-color:#5B3FA8;margin:0}
.filterscale{display:flex;justify-content:space-between;font-size:9px;color:#8E8E93;margin-top:6px;gap:2px}
.filterscale span{flex:1;text-align:center}
.filterscale span:first-child{text-align:left}
.filterscale span:last-child{text-align:right}

@media (prefers-reduced-motion: no-preference){
  .thread > *, .inbox .row, .inbox .sect{animation:pop .28s ease both}
  @keyframes pop{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
}

@media (max-width:520px){
  .bubble{font-size:13.5px}
  .inputbar{padding-bottom:18px}
}

/* Links inside a bubble. Authored transcript copy carries them (the people an
   agent comes back with), and they must stay legible on both the grey and the
   green bubble. */
.bubble a{color:inherit;text-decoration:underline;text-underline-offset:2px;font-weight:600}
.bubble.gray a{color:#0A6FD0}