/* Live support chat. Every selector is scoped to .chat so the component can sit in
   the customer portal or the staff inbox without leaking into either surface. */
.chat{
 --chat-thread-height:420px;
 display:block;
 margin-bottom:var(--space-5);
}

.chat .chat-head{
 display:flex;
 align-items:flex-end;
 justify-content:space-between;
 gap:var(--space-4);
 margin-bottom:var(--space-4);
}

.chat .chat-head h2{
 margin:0 0 var(--space-2);
 font-family:var(--font-display);
 font-size:34px;
 line-height:1.05;
 letter-spacing:-.02em;
}

.chat .chat-head p{
 margin:0;
 max-width:62ch;
 font-size:12px;
 line-height:1.7;
}

.chat .chat-reply-time{
 margin-top:var(--space-2);
 color:var(--lime);
}

.chat .chat-notice{
 margin-bottom:var(--space-4);
 padding:var(--space-3) var(--space-4);
 border:1px solid var(--warning);
 border-radius:var(--radius-control);
 background:var(--elevated);
 color:var(--warning);
 font-size:12px;
 line-height:1.6;
}

.chat .chat-loading{
 padding:var(--space-6) var(--space-4);
 border:1px dashed var(--line);
 border-radius:var(--radius-panel);
 color:var(--muted);
 text-align:center;
 font-size:12px;
}

.chat .chat-empty{
 margin-bottom:var(--space-4);
 padding:var(--space-6) var(--space-5);
 border:1px dashed var(--line);
 border-radius:var(--radius-panel);
 background:var(--panel);
 text-align:center;
}

.chat .chat-empty h3{
 margin:0 0 var(--space-2);
 font-family:var(--font-display);
 font-size:26px;
}

.chat .chat-empty p{
 margin:0 auto;
 max-width:48ch;
 font-size:12px;
 line-height:1.7;
}

.chat .chat-new{
 margin-top:var(--space-4);
 border:1px solid var(--line);
 border-radius:var(--radius-panel);
 background:var(--panel);
 padding:var(--space-4);
}

.chat .chat-new summary{
 cursor:pointer;
 color:var(--muted);
 font-size:12px;
 line-height:1.5;
}

.chat .chat-new[open] summary{
 margin-bottom:var(--space-2);
 color:var(--lime);
}

.chat .chat-card{
 margin-bottom:var(--space-4);
 padding:var(--space-4);
 border:1px solid var(--line);
 border-radius:var(--radius-panel);
 background:var(--panel);
}

.chat .chat-card-head{
 display:flex;
 align-items:flex-start;
 justify-content:space-between;
 gap:var(--space-3);
 margin-bottom:var(--space-3);
}

.chat .chat-card-head h3{
 margin:0;
 font-size:16px;
 line-height:1.4;
}

.chat .chat-card-head p{
 margin:var(--space-1) 0 0;
}

.chat .chat-card-actions{
 display:flex;
 align-items:center;
 gap:var(--space-2);
 flex-wrap:wrap;
 justify-content:flex-end;
}

.chat .chat-thread-head{
 display:flex;
 align-items:flex-start;
 justify-content:space-between;
 gap:var(--space-3);
 margin-bottom:var(--space-3);
}

.chat .chat-thread-head h3{
 margin:0;
 font-size:16px;
 line-height:1.4;
}

.chat .chat-thread-head p{
 margin:var(--space-1) 0 0;
}

.chat .chat-thread{
 height:var(--chat-thread-height);
 max-height:var(--chat-thread-height);
 overflow-y:auto;
 overscroll-behavior:contain;
 padding:var(--space-3);
 border:1px solid var(--line);
 border-radius:var(--radius-control);
 background:var(--bg);
 scrollbar-width:thin;
 scrollbar-color:var(--line) transparent;
}

.chat .chat-msg{
 display:flex;
 align-items:flex-end;
 gap:var(--space-2);
 margin-bottom:var(--space-3);
}

.chat .chat-msg:last-child{
 margin-bottom:0;
}

.chat .chat-msg-customer{
 flex-direction:row-reverse;
}

.chat .chat-avatar{
 display:grid;
 flex:0 0 28px;
 place-items:center;
 width:28px;
 height:28px;
 border:1px solid var(--line);
 border-radius:50%;
 background:var(--elevated);
 color:var(--lime);
 font-family:var(--font-display);
 font-size:11px;
 font-weight:700;
}

.chat .chat-msg-customer .chat-avatar{
 background:var(--lime-12);
 border-color:var(--lime-19);
}

.chat .chat-bubble{
 max-width:min(78%,560px);
 padding:var(--space-3) var(--space-4);
 border:1px solid var(--line);
 border-radius:var(--radius-panel);
 background:var(--elevated);
}

.chat .chat-msg-staff .chat-bubble{
 border-bottom-left-radius:var(--radius-sm);
}

.chat .chat-msg-customer .chat-bubble{
 border-color:var(--lime-19);
 border-bottom-right-radius:var(--radius-sm);
 background:var(--lime-12);
}

.chat .chat-meta{
 display:flex;
 align-items:baseline;
 justify-content:space-between;
 gap:var(--space-3);
 margin-bottom:var(--space-1);
 font-size:10px;
 color:var(--muted);
}

.chat .chat-meta strong{
 color:var(--white);
 font-size:11px;
 font-weight:600;
}

.chat .chat-msg-customer .chat-meta{
 flex-direction:row-reverse;
}

.chat .chat-bubble p{
 margin:0;
 color:var(--white);
 font-size:12px;
 line-height:1.65;
 white-space:pre-wrap;
 overflow-wrap:anywhere;
}

.chat .chat-form{
 display:grid;
 gap:var(--space-3);
 margin-top:var(--space-3);
}

.chat .chat-form label{
 font-size:11px;
 color:var(--muted);
}

.chat .chat-form input,
.chat .chat-form textarea{
 width:100%;
 margin-top:var(--space-1);
 padding:var(--space-3);
 border:1px solid var(--line);
 border-radius:var(--radius-control);
 background:var(--bg);
 color:var(--white);
 font-size:12px;
}

.chat .chat-form textarea{
 min-height:72px;
 resize:vertical;
}

.chat .chat-form-row{
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:var(--space-3);
 flex-wrap:wrap;
}

.chat .chat-hint{
 margin:0;
 color:var(--muted);
 font-size:11px;
 line-height:1.6;
}

.chat .chat-label{
 display:block;
}

.chat .chat-optional{
 color:var(--muted);
 font-weight:400;
}

.chat .chat-closed{
 margin-top:var(--space-3);
 padding:var(--space-3) var(--space-4);
 border:1px dashed var(--line);
 border-radius:var(--radius-control);
 background:var(--lime-04);
 color:var(--muted);
 font-size:11px;
 line-height:1.6;
}

.chat .chat-tag-open{
 background:var(--lime-12);
 color:var(--lime);
}

.chat .chat-tag-closed{
 background:var(--elevated);
 color:var(--muted);
}

.chat .chat-unread{
 border-color:var(--lime);
 background:var(--lime);
 color:var(--bg);
 font-weight:700;
}

.chat .chat-admin-grid{
 display:grid;
 grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
 align-items:start;
 gap:var(--space-5);
}

.chat .chat-admin-grid > .panel{
 min-width:0;
 margin-bottom:0;
}

.chat .chat-panel-head{
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:var(--space-3);
 margin-bottom:var(--space-3);
}

.chat .chat-panel-head h3{
 margin:0;
 font-size:18px;
}

.chat .chat-inbox .table-scroll{
 max-height:calc(var(--chat-thread-height) + 160px);
}

.chat .chat-inbox th{
 white-space:nowrap;
}

.chat .chat-inbox td{
 font-size:11px;
 vertical-align:top;
}

.chat .chat-preview{
 display:block;
 max-width:34ch;
 overflow:hidden;
 color:var(--muted);
 text-overflow:ellipsis;
 white-space:nowrap;
}

.chat .chat-row-active td{
 background:var(--lime-08);
}

.chat input:focus-visible,
.chat textarea:focus-visible,
.chat button:focus-visible,
.chat summary:focus-visible,
.chat a:focus-visible{
 outline:2px solid var(--lime);
 outline-offset:2px;
}

@media (max-width:1000px){
 .chat .chat-admin-grid{
  grid-template-columns:1fr;
 }
}

@media (max-width:700px){
 .chat{
  --chat-thread-height:360px;
 }

 .chat .chat-head{
  flex-direction:column;
  align-items:flex-start;
 }

 .chat .chat-head h2{
  font-size:28px;
 }

 .chat .chat-bubble{
  max-width:88%;
 }

 .chat .chat-card{
  padding:var(--space-3);
 }

 .chat .chat-card-head,
 .chat .chat-thread-head{
  flex-direction:column;
 }
}

@media (prefers-reduced-motion: no-preference){
 .chat .chat-card,
 .chat .chat-bubble,
 .chat .chat-form input,
 .chat .chat-form textarea,
 .chat .chat-card-actions .btn{
  transition:background-color .18s var(--ease),border-color .18s var(--ease),box-shadow .18s var(--ease);
 }
}