/* ===== 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;border-bottom-left-radius:5px}
.bubble.blue{background:#0A84FF;color:#fff;border-bottom-right-radius:5px}
.bubble.green{background:#1F8F49;color:#fff}
.msgrow.left .bubble.green{border-bottom-left-radius:5px}
.msgrow.right .bubble.green{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:8px;padding:8px 12px 2px;background:#F7F7F9;
  border-top:.5px solid #C9C9CE;
}
.pill{
  appearance:none;border:1px solid #D1D1D6;background:#fff;border-radius:999px;
  padding:7px 13px;font:inherit;font-size:12.5px;font-weight:600;color:#4B3AA0;cursor:pointer;
  display:inline-flex;align-items:center;gap:5px;
}
.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}
}