/* chat.css — «پیام‌ها» (web/js/chat.js), shared by the customer, business
   and employee panels. Theme tokens only, so every skin × light/dark works. */
.otc{--otc-h:min(76vh,780px);display:grid;grid-template-columns:minmax(250px,320px) minmax(0,1fr);height:var(--otc-h);min-height:380px;
  background:var(--sf);border:1px solid var(--ln);border-radius:var(--r-lg,20px);overflow:hidden;box-shadow:var(--sh-sm,none)}
.otc,.otc *{box-sizing:border-box}
/* Panels do not load site.css, so make `hidden` beat the display rules here. */
.otc [hidden]{display:none!important}
.otc.narrow{grid-template-columns:minmax(0,1fr)}
.otc.narrow[data-view="list"] .otc-thread,.otc.narrow[data-view="thread"] .otc-list{display:none}
.otc .ic-svg{flex:none}

/* ---------------------------------------------------------------- list */
.otc-list{display:flex;flex-direction:column;min-height:0;border-inline-end:1px solid var(--ln);background:color-mix(in srgb,var(--s2) 45%,var(--sf))}
.otc.narrow .otc-list{border:0}
.otc-lh{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:14px 14px 8px}
.otc-lh h2{margin:0;font-size:17px;display:flex;align-items:center;gap:7px}
.otc-lh h2 .ic-svg{color:var(--br)}
.otc-badge{min-width:22px;height:22px;padding:0 7px;border-radius:999px;background:var(--br);color:var(--ob,#fff);font-size:12px;font-weight:800;display:inline-grid;place-items:center}
.otc-find{display:flex;align-items:center;gap:7px;margin:0 12px 8px;padding:0 11px;border:1px solid var(--ln);background:var(--sf);border-radius:12px;color:var(--mu)}
.otc-find:focus-within{border-color:var(--br);box-shadow:0 0 0 3px var(--bs)}
.otc-find input{flex:1;min-width:0;border:0;outline:0;background:none;color:var(--ink);font:inherit;font-size:13.5px;padding:9px 0}
.otc-items{flex:1;min-height:0;overflow-y:auto;padding:4px 8px 10px;scrollbar-width:thin}
.otc-item{display:flex;align-items:center;gap:10px;width:100%;padding:10px;border:0;background:none;border-radius:14px;cursor:pointer;text-align:start;color:var(--ink);font:inherit;transition:background .15s}
.otc-item:hover{background:color-mix(in srgb,var(--br) 7%,transparent)}
.otc-item.on{background:color-mix(in srgb,var(--br) 13%,var(--sf))}
.otc-item:focus-visible{outline:2px solid var(--br);outline-offset:-2px}
.otc-av{width:46px;height:46px;flex:none;border-radius:15px;display:grid;place-items:center;overflow:hidden;font-weight:800;font-size:15px;
  background:color-mix(in srgb,var(--c,var(--br)) 15%,var(--sf));color:var(--c,var(--br))}
.otc-av img{width:100%;height:100%;object-fit:cover}
.otc-av .ic-svg{width:24px;height:24px}
.otc-it{flex:1;min-width:0}
.otc-it-top{display:flex;align-items:baseline;gap:6px}
.otc-it-top b{flex:1;min-width:0;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.otc-it-top time{font-size:11.5px;color:var(--mu);white-space:nowrap}
.otc-it-bot{display:flex;align-items:center;gap:6px;margin-top:2px}
.otc-it-bot span{flex:1;min-width:0;font-size:12.5px;color:var(--mu);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.otc-item.unread .otc-it-bot span{color:var(--ink);font-weight:600}
.otc-item.unread .otc-it-top time{color:var(--br);font-weight:700}
.otc-it-bot .otc-badge{height:20px;min-width:20px;font-size:11px}
.otc-it-bot .ic-svg{width:15px;height:15px;color:var(--mu)}
.otc-it-bot .ic-svg.read{color:var(--br)}
.otc-none{padding:26px 14px;text-align:center;color:var(--mu);font-size:13.5px;line-height:1.9}
.otc-none .big{width:58px;height:58px;margin:0 auto 10px;border-radius:19px;display:grid;place-items:center;background:color-mix(in srgb,var(--br) 12%,var(--sf));color:var(--br)}
.otc-none .big .ic-svg{width:30px;height:30px}
.otc-none b{display:block;color:var(--ink);font-size:15px;margin-bottom:4px}
.otc-none .btn{margin-top:12px;display:inline-flex;align-items:center;gap:6px}
.otc-sk{height:62px;margin:4px 0;border-radius:14px;background:linear-gradient(90deg,var(--s2),color-mix(in srgb,var(--s2) 40%,var(--sf)),var(--s2)) 0 0/200% 100%;animation:otcsk 1.2s linear infinite}
@keyframes otcsk{to{background-position:-200% 0}}

/* -------------------------------------------------------------- thread */
.otc-thread{display:flex;flex-direction:column;min-width:0;min-height:0;position:relative;container-type:inline-size;
  background:radial-gradient(circle at 20% 10%,color-mix(in srgb,var(--br) 6%,transparent),transparent 45%),
             radial-gradient(circle at 85% 90%,color-mix(in srgb,var(--ac) 7%,transparent),transparent 45%),var(--bg)}
.otc-th{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--sf);border-bottom:1px solid var(--ln);min-height:64px}
.otc-th .otc-av{width:42px;height:42px;border-radius:14px}
.otc-th-tx{flex:1;min-width:0}
.otc-th-tx b{display:block;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.otc-th-tx small{display:block;color:var(--mu);font-size:12px}
.otc-back{display:none;border:0;background:none;color:var(--ink);padding:6px;border-radius:10px;cursor:pointer}
.otc-back .ic-svg{width:22px;height:22px;transform:scaleX(-1)}
.otc.narrow .otc-back{display:grid;place-items:center}
.otc-acts{display:flex;gap:6px}
.otc-acts a,.otc-acts button{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--ln);background:var(--sf);color:var(--ink);text-decoration:none;
  border-radius:999px;padding:7px 12px;font:inherit;font-size:12.5px;cursor:pointer;white-space:nowrap}
.otc-acts a:hover,.otc-acts button:hover{border-color:var(--br);color:var(--br)}
.otc-acts .pri{background:var(--br);border-color:var(--br);color:var(--ob,#fff)}
.otc-acts .pri:hover{color:var(--ob,#fff);filter:brightness(1.06)}
.otc-ctx{display:flex;align-items:center;gap:8px;margin:10px 14px 0;padding:8px 12px;border-radius:12px;background:var(--sf);border:1px dashed var(--ln);font-size:12.5px;color:var(--mu)}
.otc-ctx .ic-svg{color:var(--br)}
.otc-ctx b{color:var(--ink)}
.otc-scroll{flex:1;min-height:0;overflow-y:auto;padding:14px 14px 8px;display:flex;flex-direction:column;gap:3px;scrollbar-width:thin;overscroll-behavior:contain}
.otc-day{align-self:center;margin:12px 0 6px;padding:3px 12px;border-radius:999px;font-size:11.5px;font-weight:700;color:var(--mu);
  background:color-mix(in srgb,var(--sf) 85%,transparent);border:1px solid var(--ln)}
.otc-msg{max-width:min(78%,520px);display:flex;flex-direction:column;animation:otcin .2s ease both}
@keyframes otcin{from{opacity:0;transform:translateY(5px)}}
/* RTL: the other side's messages sit on the right (start), yours on the left. */
.otc-msg.in{align-self:flex-start}
.otc-msg.out{align-self:flex-end}
.otc-msg .bub{position:relative;padding:8px 12px 6px;border-radius:18px;font-size:14px;line-height:1.85;white-space:pre-wrap;overflow-wrap:anywhere;box-shadow:0 1px 1px rgba(0,0,0,.04)}
.otc-msg.in .bub{background:var(--sf);border:1px solid var(--ln);border-start-start-radius:6px}
.otc-msg.out .bub{background:linear-gradient(135deg,var(--br),color-mix(in srgb,var(--br) 78%,var(--ac)));color:var(--ob,#fff);border-start-end-radius:6px}
.otc-msg.in+.otc-msg.in .bub,.otc-msg.out+.otc-msg.out .bub{margin-top:1px}
.otc-msg .bub a{color:inherit;text-decoration:underline}
.otc-who{font-size:11.5px;font-weight:700;color:var(--br);margin:6px 6px 2px}
.otc-meta{display:flex;align-items:center;gap:4px;justify-content:flex-end;font-size:10.5px;opacity:.75;margin-top:2px;direction:rtl}
.otc-meta .ic-svg{width:14px;height:14px}
.otc-msg.pending .otc-meta{opacity:.55}
.otc-msg.failed .bub{background:var(--bdb);color:var(--bd);border:1px solid color-mix(in srgb,var(--bd) 35%,transparent)}
.otc-retry{align-self:flex-end;border:0;background:none;color:var(--bd);font:inherit;font-size:12px;cursor:pointer;display:inline-flex;align-items:center;gap:4px;padding:2px 6px}
.otc-new{position:absolute;bottom:82px;inset-inline-start:50%;transform:translateX(50%);border:0;border-radius:999px;background:var(--br);color:var(--ob,#fff);
  font:inherit;font-size:12.5px;font-weight:700;padding:7px 14px;box-shadow:var(--sh);cursor:pointer;display:inline-flex;align-items:center;gap:5px}
.otc-hello{margin:auto;text-align:center;max-width:340px;color:var(--mu);font-size:13.5px;line-height:1.9;padding:20px 10px}
.otc-hello .big{width:64px;height:64px;margin:0 auto 10px;border-radius:22px;display:grid;place-items:center;background:color-mix(in srgb,var(--br) 12%,var(--sf));color:var(--br)}
.otc-hello .big .ic-svg{width:32px;height:32px}
.otc-hello b{display:block;color:var(--ink);font-size:16px;margin-bottom:4px}
.otc-quick{display:flex;gap:6px;overflow-x:auto;padding:4px 14px 2px;scrollbar-width:none}
.otc-quick::-webkit-scrollbar{display:none}
.otc-quick button{flex:none;border:1px solid color-mix(in srgb,var(--br) 35%,var(--ln));background:color-mix(in srgb,var(--br) 7%,var(--sf));color:var(--br);
  border-radius:999px;padding:7px 12px;font:inherit;font-size:12.5px;cursor:pointer;white-space:nowrap}
.otc-quick button:hover{background:color-mix(in srgb,var(--br) 14%,var(--sf))}
.otc-comp{display:flex;align-items:flex-end;gap:8px;padding:10px 12px 12px;background:var(--sf);border-top:1px solid var(--ln)}
.otc-comp textarea{flex:1;min-width:0;resize:none;max-height:140px;border:1px solid var(--ln);background:var(--bg);color:var(--ink);border-radius:20px;
  padding:10px 14px;font:inherit;font-size:14px;line-height:1.7;outline:0}
.otc-comp textarea:focus{border-color:var(--br);box-shadow:0 0 0 3px var(--bs)}
.otc-send{width:44px;height:44px;flex:none;border:0;border-radius:50%;background:var(--br);color:var(--ob,#fff);display:grid;place-items:center;cursor:pointer;
  box-shadow:0 6px 16px color-mix(in srgb,var(--br) 35%,transparent);transition:transform .15s,opacity .15s}
.otc-send .ic-svg{width:21px;height:21px;transform:scaleX(-1)}
.otc-send:disabled{opacity:.45;cursor:default;box-shadow:none}
.otc-send:not(:disabled):active{transform:scale(.92)}
.otc-count{font-size:11px;color:var(--mu);align-self:center}
.otc-ro{padding:12px 14px;text-align:center;color:var(--mu);font-size:13px;background:var(--sf);border-top:1px solid var(--ln)}
.otc-empty{margin:auto;text-align:center;color:var(--mu);padding:24px;max-width:320px;line-height:1.9}
.otc-empty .big{width:76px;height:76px;margin:0 auto 12px;border-radius:26px;display:grid;place-items:center;background:color-mix(in srgb,var(--br) 11%,var(--sf));color:var(--br)}
.otc-empty .big .ic-svg{width:38px;height:38px}
.otc-empty b{display:block;color:var(--ink);font-size:16px}

/* Icon-only header actions when the thread pane itself is narrow. */
@container (max-width: 560px){
  .otc-acts span{display:none}
  .otc-acts a,.otc-acts button{padding:8px}
}
html[data-skin="glass"] .otc{background:var(--sf);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
html[data-skin="soft"] .otc{border-color:transparent;box-shadow:var(--neu-out)}
html[data-skin="hacker"] .otc-msg .bub{border-radius:var(--r-sm,4px)!important}

@media (max-width:760px){
  .otc{--otc-h:calc(100dvh - 210px);border-radius:var(--r,16px)}
  .otc-acts span{display:none}
  .otc-acts a,.otc-acts button{padding:8px}
  .otc-msg{max-width:86%}
}
@media (prefers-reduced-motion:reduce){.otc-msg,.otc-sk{animation:none}}