/* Support Simulator Page Styles */

.page-simulator-support{
  padding:8px 0;
  flex:1;
  min-height:0;
  box-sizing:border-box;
  background:transparent;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  font-family:"Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  color:#000;
  --t-text-primary:#000;
  --t-text-secondary:#000;
  --t-text-muted:#000;
}

.page-simulator-support .support-shell{
  width:min(1200px, 92vw);
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:8px;
  flex:1;
  min-height:0;
}

/* Header */
.page-simulator-support .support-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  background:transparent;
  border-radius:16px;
  padding:10px 24px;
  border:none;
  box-shadow:none;
}

.page-simulator-support .support-title{
  font-size:24px;
  font-weight:800;
  margin:0;
  color:var(--t-text-primary, #0f172a);
}

.page-simulator-support .support-subtitle{
  margin:4px 0 0;
  font-size:13px;
  color:var(--t-text-muted, #64748b);
}

.page-simulator-support .support-session-stats{
  display:flex;
  align-items:center;
  gap:20px;
}

.page-simulator-support .support-session-stat{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
}

.page-simulator-support .support-session-label{
  font-size:10px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.05em;
  color:var(--t-text-muted, #64748b);
}

.page-simulator-support .support-session-value{
  font-size:20px;
  font-weight:800;
  color:#2563eb;
}

.page-simulator-support .support-timer{
  display:flex;
  align-items:center;
  gap:12px;
}

.page-simulator-support .support-timer-value{
  font-size:16px;
  font-weight:600;
  font-variant-numeric:tabular-nums;
  color:var(--t-text-primary, #0f172a);
}


/* Main Layout */
.page-simulator-support .support-main{
  display:grid;
  grid-template-columns:260px 1fr;
  gap:16px;
  height:calc(100vh - 185px);
  min-height:0;
  overflow:hidden;
}

/* Chat Windows Grid Layout */
.page-simulator-support .support-chat-windows{
  display:grid;
  gap:16px;
  min-height:0;
  height:100%;
  overflow:hidden;
}

.page-simulator-support .support-chat-windows.layout-1{
  grid-template-columns:1fr;
}

.page-simulator-support .support-chat-windows.layout-2{
  grid-template-columns:1fr 1fr;
}

.page-simulator-support .support-chat-windows.layout-3{
  grid-template-columns:1fr 1fr 1fr;
}

.page-simulator-support .support-chat-window{
  background:transparent;
  border-radius:20px;
  border:1px solid rgba(148,163,184,.2);
  box-shadow:none;
  display:flex;
  flex-direction:column;
  min-height:0;
  position:relative;
  overflow:hidden;
  transition:opacity .2s ease, transform .2s ease;
}

.page-simulator-support .support-chat-window.inactive{
  opacity:0.7;
}

.page-simulator-support .support-chat-window.active{
  opacity:1;
  box-shadow:none;
  border-color:rgba(37,99,235,.3);
}

.page-simulator-support .support-window-header{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 16px;
  border-bottom:1px solid rgba(148,163,184,.1);
  background:transparent;
}

.page-simulator-support .support-window-header-simple{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 14px;
  border-bottom:1px solid rgba(148,163,184,.1);
  background:transparent;
}

.page-simulator-support .support-window-header-main{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  flex:1;
}

.page-simulator-support .support-window-header-actions{
  display:flex;
  align-items:center;
  gap:6px;
  margin-left:auto;
}

.page-simulator-support .support-window-avatar{
  width:28px;
  height:28px;
  border-radius:50%;
  object-fit:cover;
}

.page-simulator-support .support-window-name{
  font-size:14px;
  font-weight:600;
  color:var(--t-text-primary, #0f172a);
}

.page-simulator-support .support-window-name-row{
  display:flex;
  align-items:center;
  gap:8px;
  flex:1;
  min-width:0;
}

.page-simulator-support .support-window-mood{
  width:30px;
  height:30px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  border:1px solid rgba(37,99,235,.18);
  background:rgba(37,99,235,.1);
  color:#2563eb;
  flex-shrink:0;
}

.page-simulator-support .support-window-mood svg{
  width:16px;
  height:16px;
  stroke:currentColor;
}

.page-simulator-support .support-window-mood-happy{
  color:#15803d;
  background:rgba(34,197,94,.16);
  border-color:rgba(34,197,94,.3);
}

.page-simulator-support .support-window-mood-neutral{
  color:#a16207;
  background:rgba(250,204,21,.2);
  border-color:rgba(202,138,4,.32);
}

.page-simulator-support .support-window-mood-sad{
  color:#b91c1c;
  background:rgba(239,68,68,.14);
  border-color:rgba(220,38,38,.28);
}

.page-simulator-support .support-chat-switch-btn{
  width:34px;
  height:30px;
  border-radius:12px;
  border:1px solid rgba(37,99,235,.18);
  background:rgba(37,99,235,.1);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  margin-left:4px;
  padding:0;
  color:#2563eb;
  transition:background .15s ease, border-color .15s ease, transform .12s ease;
}

.page-simulator-support .support-chat-switch-btn:hover{
  background:rgba(37,99,235,.16);
  border-color:rgba(37,99,235,.28);
  transform:translateY(-1px);
}

.page-simulator-support .support-window-status{
  font-size:11px;
  font-weight:600;
  padding:4px 10px;
  border-radius:12px;
  background:rgba(148,163,184,.15);
  color:var(--t-text-muted, #64748b);
}

.page-simulator-support .support-window-status.typing{
  background:rgba(37,99,235,.15);
  color:#2563eb;
  animation:supportPulse 1.5s infinite;
}

.page-simulator-support .support-window-status.completed{
  background:rgba(34,197,94,.15);
  color:#22c55e;
}

.page-simulator-support .support-chat-timer{
  font-size:12px;
  font-weight:500;
  color:var(--t-text-muted, #64748b);
  font-variant-numeric:tabular-nums;
}

.page-simulator-support .support-window-stats{
  display:flex;
  align-items:center;
  gap:12px;
  margin-left:auto;
  margin-right:12px;
}

.page-simulator-support .support-stat-wpm,
.page-simulator-support .support-stat-acc{
  font-size:11px;
  font-weight:600;
  padding:4px 10px;
  border-radius:12px;
  background:rgba(37,99,235,.1);
  color:#2563eb;
}

.page-simulator-support .support-minimize-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border:1px solid rgba(148,163,184,.55);
  background:#f8fafc;
  border-radius:10px;
  cursor:pointer;
  color:#0f172a;
  box-shadow:0 1px 2px rgba(15,23,42,.10);
  transition:background .15s ease, color .15s ease, border-color .15s ease, transform .12s ease;
  margin-left:auto;
}

.page-simulator-support .support-minimize-btn:hover{
  background:#eef2ff;
  border-color:#94a3b8;
  color:#1e293b;
}

.page-simulator-support .support-minimize-btn:active{
  transform:translateY(1px);
}

.page-simulator-support .support-minimize-symbol{
  display:block;
  font-size:22px;
  font-weight:700;
  line-height:1;
  margin-top:-3px;
}

/* Bottom bar for 3-chat mode */
.page-simulator-support .support-window-bottom-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:8px 12px;
  border-top:1px solid rgba(148,163,184,.1);
  background:var(--t-surface-high, #f8fafc);
  min-height:40px;
}

.page-simulator-support .support-window-bottom-left{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:11px;
}

.page-simulator-support .support-window-bottom-center{
  display:flex;
  align-items:center;
  gap:8px;
}

.page-simulator-support .support-window-bottom-right{
  display:flex;
  align-items:center;
  gap:6px;
}

.page-simulator-support .support-send-btn-small{
  width:34px;
  height:30px;
  border-radius:12px;
  border:1px solid rgba(37,99,235,.18);
  background:rgba(37,99,235,.1);
  color:#2563eb;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .15s ease, border-color .15s ease, transform .12s ease;
}

.page-simulator-support .support-send-btn-small:disabled{
  opacity:0.45;
  cursor:not-allowed;
}

.page-simulator-support .support-send-btn-small:not(:disabled):hover{
  transform:translateY(-1px);
  background:rgba(37,99,235,.16);
  border-color:rgba(37,99,235,.28);
}

.page-simulator-support .support-minimize-btn-small{
  width:34px;
  height:30px;
  border-radius:12px;
  border:1px solid rgba(37,99,235,.18);
  background:rgba(37,99,235,.1);
  cursor:pointer;
  color:#2563eb;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .15s ease, border-color .15s ease, transform .12s ease;
}

.page-simulator-support .support-minimize-btn-small:hover{
  background:rgba(37,99,235,.16);
  border-color:rgba(37,99,235,.28);
}

.page-simulator-support .support-minimize-btn-small:active{
  transform:translateY(1px);
}

.page-simulator-support .support-control-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:16px;
  height:16px;
  line-height:0;
}

.page-simulator-support .support-control-icon svg{
  width:16px;
  height:16px;
  display:block;
}

/* Chat Area */
.page-simulator-support .support-chat{
  flex:1;
  min-height:0;
  padding:16px 24px;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  gap:16px;
  scroll-behavior:smooth;
}

.page-simulator-support .support-chat::-webkit-scrollbar{
  width:6px;
}

.page-simulator-support .support-chat::-webkit-scrollbar-thumb{
  background:rgba(148,163,184,.3);
  border-radius:3px;
}

/* Messages */
.page-simulator-support .support-message{
  display:flex;
  gap:12px;
  max-width:85%;
  animation:supportFadeIn 0.3s ease;
}

@keyframes supportFadeIn{
  from{ opacity:0; transform:translateY(10px); }
  to{ opacity:1; transform:translateY(0); }
}

.page-simulator-support .support-message-in{
  align-self:flex-start;
}

.page-simulator-support .support-message-out{
  align-self:flex-end;
  flex-direction:row-reverse;
}

.page-simulator-support .support-avatar{
  width:40px;
  height:40px;
  border-radius:50%;
  flex-shrink:0;
  object-fit:cover;
}

.page-simulator-support .support-avatar-agent{
  background:rgba(37,99,235,.12);
  color:#2563eb;
  display:flex;
  align-items:center;
  justify-content:center;
}

.page-simulator-support .support-avatar-customer{
  background:rgba(15,23,42,.08);
  color:#334155;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}

.page-simulator-support .support-avatar-customer::before{
  content:'';
  width:60%;
  height:60%;
  display:block;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  opacity:.95;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2364748b'%3E%3Cpath d='M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10z'/%3E%3Cpath d='M4 20v-1c0-2.9 3.6-5 8-5s8 2.1 8 5v1H4z'/%3E%3C/svg%3E");
}

.page-simulator-support .support-message-content{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.page-simulator-support .support-message-header{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
}

.page-simulator-support .support-message-author{
  font-weight:700;
  color:var(--t-text-primary, #0f172a);
}

.page-simulator-support .support-message-time{
  color:var(--t-text-muted, #64748b);
  font-size:11px;
}

.page-simulator-support .support-message-text{
  padding:12px 16px;
  border-radius:16px;
  background:var(--t-surface-high, #f1f5f9);
  color:var(--t-text-primary, #0f172a);
  font-size:14px;
  line-height:1.6;
}

.page-simulator-support .support-message-bubble{
  background:#2563eb;
  color:#fff;
  border-radius:16px 16px 4px 16px;
}

.page-simulator-support .support-message-stats{
  display:flex;
  gap:12px;
  padding:6px 12px;
  background:rgba(37,99,235,.1);
  border-radius:20px;
  margin-top:4px;
  align-self:flex-end;
}

.page-simulator-support .support-message-stats span{
  font-size:11px;
  font-weight:700;
  color:#2563eb;
}

/* Typing Block */
.page-simulator-support .support-typing-block{
  align-self:flex-end;
  max-width:90%;
  width:100%;
  margin-top:8px;
}

.page-simulator-support .support-typing-indicator{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:8px;
  font-size:11px;
  color:#2563eb;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.05em;
}

.page-simulator-support .support-typing-dot{
  width:8px;
  height:8px;
  background:#2563eb;
  border-radius:50%;
  animation:supportPulse 1.5s infinite;
}

@keyframes supportPulse{
  0%, 100%{ opacity:1; transform:scale(1); }
  50%{ opacity:0.5; transform:scale(0.8); }
}

.page-simulator-support .support-typing-text{
  background:var(--t-surface, #fff);
  border:2px solid rgba(37,99,235,.25);
  border-radius:16px;
  padding:20px 24px;
  font-size:16px;
  line-height:1.8;
  display:flex;
  flex-wrap:wrap;
  gap:0;
  position:relative;
}

.page-simulator-support .support-char{
  white-space:pre;
  color:rgba(107,114,128,.68);
  transition:color 0.12s ease, background 0.12s ease;
  position:relative;
}

.page-simulator-support .support-char.typed{
  color:#0f172a;
  font-weight:500;
}

.page-simulator-support .support-char.active{
  position:relative;
}

.page-simulator-support .support-input-typing.is-typing .support-char.active::before{
  content:'';
  position:absolute;
  left:-2px;
  top:10%;
  height:80%;
  width:2px;
  background:#2563eb;
  border-radius:2px;
  animation:supportCursorBlink 1s infinite;
}

@keyframes supportCursorBlink{
  0%, 50%{ opacity:1; }
  51%, 100%{ opacity:0; }
}

/* Bot Typing Indicator */
.page-simulator-support .support-typing-indicator-wrapper{
  align-self:flex-start;
}

.page-simulator-support .support-typing-indicator{
  display:flex;
  align-items:center;
  gap:6px;
  padding:12px 16px;
  background:var(--t-surface, #fff);
  border-radius:20px;
  box-shadow:0 2px 8px rgba(15,23,42,.08);
}

.page-simulator-support .support-typing-text{
  font-size:10px;
  line-height:1;
  color:var(--t-text-muted, #64748b);
  text-transform:none;
  letter-spacing:0;
  margin-right:4px;
  background:transparent;
  border:none;
  padding:0;
  border-radius:0;
  display:inline-flex;
  align-items:center;
}

.page-simulator-support .support-typing-dot{
  width:8px;
  height:8px;
  background:#2563eb;
  border-radius:50%;
  animation:supportTypingBounce 1.4s infinite ease-in-out both;
}

.page-simulator-support .support-typing-dot:nth-child(1){
  animation-delay:-0.32s;
}

.page-simulator-support .support-typing-dot:nth-child(2){
  animation-delay:-0.16s;
}

.page-simulator-support .support-typing-dot:nth-child(3){
  animation-delay:0s;
}

@keyframes supportTypingBounce{
  0%, 80%, 100%{ transform:scale(0.6); opacity:0.4; }
  40%{ transform:scale(1); opacity:1; }
}

/* Input Area */
.page-simulator-support .support-input-area{
  padding:12px 16px;
  background:var(--t-surface-high, #f8fafc);
  border-top:1px solid rgba(148,163,184,.1);
  flex-shrink:0;
}

.page-simulator-support .support-input-typing{
  position:relative;
  min-height:70px;
  max-height:70px;
  background:var(--t-surface, #fff);
  border-radius:12px;
  padding:10px 14px;
  display:flex;
  align-items:flex-start;
  overflow-y:auto;
  scroll-behavior:smooth;
}

.page-simulator-support .support-input-hidden{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:0;
  cursor:text;
  border:none;
  background:transparent;
  z-index:10;
}

.page-simulator-support .support-ghost-text{
  flex:1;
  min-height:100%;
  align-content:flex-start;
  font-size:14px;
  line-height:1.6;
  display:flex;
  flex-wrap:wrap;
  gap:0;
  color:transparent;
  user-select:none;
  pointer-events:none;
}

.page-simulator-support .support-input-typing:has(.support-input-hidden:focus){
  border-color:#2563eb;
  box-shadow:0 0 0 3px rgba(37,99,235,.1);
}

/* Single chat mode - larger input area with side send button */
.page-simulator-support .support-input-area:has(.support-send-btn){
  padding:16px 24px;
  display:flex;
  gap:12px;
  align-items:center;
}

.page-simulator-support .support-input-area:has(.support-send-btn) .support-input-typing{
  min-height:90px;
  max-height:90px;
  border-radius:16px;
  padding:12px 16px;
  flex:1;
}

.page-simulator-support .support-send-btn{
  height:44px;
  padding:0 18px;
  border-radius:12px;
  border:1px solid rgba(37,99,235,.18);
  background:rgba(37,99,235,.1);
  color:#2563eb;
  font-size:14px;
  font-weight:700;
  cursor:pointer;
  transition:background .15s ease, border-color .15s ease, transform .12s ease;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}

.page-simulator-support .support-send-btn:not(:disabled):hover{
  transform:translateY(-1px);
  background:rgba(37,99,235,.16);
  border-color:rgba(37,99,235,.28);
}

.page-simulator-support .support-send-btn:disabled{
  opacity:0.45;
  cursor:not-allowed;
}

.page-simulator-support .support-send-btn-label{
  line-height:1;
}

/* Sidebar */
.page-simulator-support .support-sidebar{
  display:flex;
  flex-direction:column;
  gap:12px;
  background:transparent;
  border-radius:20px;
  border:none;
  padding:20px;
  box-shadow:none;
  width:260px;
  min-height:0;
  max-height:100%;
  overflow-y:auto;
}

/* Chat Sections */
.page-simulator-support .support-chats-section{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.page-simulator-support .support-chats-section.completed{
  opacity:0.85;
}

.page-simulator-support .support-section-title{
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.08em;
  color:var(--t-text-muted, #64748b);
  padding:0 8px;
  margin-bottom:4px;
}

.page-simulator-support .support-chats-section.completed .support-section-title{
  color:#000;
}

/* Ticket Status */
.page-simulator-support .support-ticket-status{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 16px;
  background:rgba(37,99,235,.08);
  border-radius:12px;
}

.page-simulator-support .support-status-indicator{
  width:10px;
  height:10px;
  border-radius:50%;
}

.page-simulator-support .support-status-indicator.open{
  background:#22c55e;
  box-shadow:0 0 0 3px rgba(34,197,94,.2);
}

.page-simulator-support .support-status-indicator.closed{
  background:#ef4444;
  box-shadow:0 0 0 3px rgba(239,68,68,.2);
}

.page-simulator-support .support-status-text{
  font-size:14px;
  font-weight:600;
  color:var(--t-text-primary, #0f172a);
}

.page-simulator-support .support-add-chat-btn{
  width:24px;
  height:24px;
  border-radius:6px;
  border:none;
  background:rgba(37,99,235,.15);
  color:#2563eb;
  font-size:16px;
  font-weight:700;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-left:auto;
  transition:background .15s ease, transform .1s ease;
}

.page-simulator-support .support-add-chat-btn:hover{
  background:rgba(37,99,235,.25);
  transform:scale(1.05);
}

.page-simulator-support .support-add-chat-btn:active{
  transform:scale(0.95);
}

.page-simulator-support .support-add-chat-btn:disabled,
.page-simulator-support .support-add-chat-btn[style*="none"]{
  display:none !important;
}

/* Chat List */
.page-simulator-support .support-chat-list{
  display:flex;
  flex-direction:column;
  gap:8px;
  flex:1;
}

/* Drag and Drop */
.page-simulator-support .support-drop-overlay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(37,99,235,.1);
  border:2px dashed #2563eb;
  border-radius:16px;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease;
  z-index:10;
}

.page-simulator-support .support-drop-overlay span{
  font-size:18px;
  font-weight:600;
  color:#2563eb;
}

.page-simulator-support .support-chat-wrapper.drag-over .support-drop-overlay{
  opacity:1;
}

.page-simulator-support .support-chat-wrapper.drag-over{
  border-color:#2563eb;
  box-shadow:0 0 0 3px rgba(37,99,235,.2);
}

.page-simulator-support .support-chat-item.draggable{
  cursor:grab;
}

.page-simulator-support .support-chat-item.draggable:hover{
  background:rgba(37,99,235,.08);
}

.page-simulator-support .support-chat-item.dragging{
  opacity:.6;
  cursor:grabbing;
  transform:scale(.98);
  box-shadow:0 4px 15px rgba(0,0,0,.15);
}

.page-simulator-support .support-chat-item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px;
  border-radius:12px;
  cursor:pointer;
  transition:background .15s ease;
}

.page-simulator-support .support-chat-item:hover{
  background:rgba(148,163,184,.1);
}

.page-simulator-support .support-chat-item.active{
  background:rgba(37,99,235,.1);
}

.page-simulator-support .support-chat-avatar{
  width:40px;
  height:40px;
  border-radius:50%;
  object-fit:cover;
}

.page-simulator-support .support-chat-info{
  display:flex;
  flex-direction:column;
  gap:2px;
  overflow:hidden;
}

.page-simulator-support .support-chat-name{
  font-size:14px;
  font-weight:600;
  color:var(--t-text-primary, #0f172a);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.page-simulator-support .support-chat-preview{
  font-size:12px;
  color:var(--t-text-muted, #64748b);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.page-simulator-support .support-chat-stats{
  display:flex;
  gap:8px;
  font-size:11px;
  color:var(--t-text-muted, #64748b);
}

.page-simulator-support .support-chat-stats span{
  display:flex;
  align-items:center;
  gap:2px;
}

.page-simulator-support .support-chat-item.completed .support-chat-name{
  color:#22c55e;
}

.page-simulator-support .support-completed-badge{
  display:flex;
  align-items:center;
  justify-content:center;
  width:22px;
  height:22px;
  background:#22c55e;
  color:#fff;
  font-size:12px;
  font-weight:700;
  border-radius:50%;
  flex-shrink:0;
}

.page-simulator-support .support-completed-notice{
  text-align:center;
  padding:16px;
  background:rgba(34,197,94,.1);
  border:1px solid rgba(34,197,94,.2);
  border-radius:12px;
  color:#22c55e;
  font-size:13px;
  font-weight:500;
  margin:16px;
}

.page-simulator-support .support-chat-completed{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:10px;
  padding:16px 12px;
  margin:8px 0;
  background:transparent;
  border:none;
  outline:none;
}

.page-simulator-support .support-chat-completed-row{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}

.page-simulator-support .support-chat-completed span{
  font-size:12px;
  font-weight:600;
  color:#94a3b8;
  text-transform:uppercase;
  letter-spacing:0.5px;
}

.page-simulator-support .support-completed-line{
  flex:1;
  height:1px;
  background:rgba(148,163,184,0.3);
}

.page-simulator-support .support-chat-completed-buttons{
  display:flex;
  gap:10px;
  justify-content:center;
  align-items:center;
}

.page-simulator-support .support-chat-close-btn{
  height:34px;
  padding:0 14px;
  border:none;
  border-radius:10px;
  background:#64748b;
  color:#fff;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease;
  box-shadow:0 3px 10px rgba(100,116,139,.25);
}

.page-simulator-support .support-chat-close-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 5px 14px rgba(100,116,139,.35);
}

.page-simulator-support .support-chat-new-btn{
  height:34px;
  padding:0 14px;
  border:none;
  border-radius:10px;
  background:#2563eb;
  color:#fff;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease;
  box-shadow:0 3px 10px rgba(37,99,235,.25);
}

.page-simulator-support .support-chat-new-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 5px 14px rgba(37,99,235,.3);
}

.page-simulator-support .support-chat-item.unread .support-chat-name{
  color:#2563eb;
  font-weight:700;
}

.page-simulator-support .support-chat-item.unread .support-chat-preview{
  color:#2563eb;
  font-weight:500;
}

.page-simulator-support .support-typing-badge{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:24px;
  height:18px;
  background:#2563eb;
  color:#fff;
  font-size:10px;
  font-weight:700;
  border-radius:9px;
  padding:0 6px;
  animation:supportPulseBadge 1.5s infinite;
}

@keyframes supportPulseBadge{
  0%, 100%{ opacity:1; transform:scale(1); }
  50%{ opacity:0.7; transform:scale(0.95); }
}

.page-simulator-support .support-new-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:100%;
  padding:14px;
  border-radius:12px;
  border:none;
  background:#2563eb;
  color:#fff;
  font-size:14px;
  font-weight:700;
  cursor:pointer;
  transition:transform 0.15s ease, box-shadow 0.15s ease;
  box-shadow:0 4px 15px rgba(37,99,235,.3);
  margin-top:auto;
}

.page-simulator-support .support-new-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(37,99,235,.4);
}

/* Completed State */
.page-simulator-support .support-completed{
  align-self:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
  padding:40px;
  background:rgba(37,99,235,.05);
  border-radius:20px;
  border:2px solid rgba(37,99,235,.2);
  margin:20px 0;
}

.page-simulator-support .support-completed-icon{
  width:60px;
  height:60px;
  border-radius:50%;
  background:#2563eb;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
}

.page-simulator-support .support-completed h3{
  margin:0;
  font-size:20px;
  font-weight:700;
  color:var(--t-text-primary, #0f172a);
}

.page-simulator-support .support-completed p{
  margin:0;
  font-size:14px;
  color:var(--t-text-muted, #64748b);
}

/* Dark Theme Support */
[data-theme="dark"] .page-simulator-support{
  background:transparent;
  color:#e2e8f0;
  --t-text-primary:#e2e8f0;
  --t-text-secondary:#cbd5e1;
  --t-text-muted:#94a3b8;
}

[data-theme="dark"] .page-simulator-support .support-char{
  color:rgba(148,163,184,.85);
}

[data-theme="dark"] .page-simulator-support .support-char.typed,
[data-theme="dark"] .page-simulator-support .support-char.active{
  color:#e2e8f0;
}

[data-theme="dark"] .page-simulator-support .support-char.error{
  color:#f87171;
  background:rgba(239,68,68,.15);
}

[data-theme="dark"] .page-simulator-support .support-input-typing.is-typing .support-char.active::before{
  background:#60a5fa;
}

[data-theme="dark"] .page-simulator-support .support-input-typing{
  background:rgba(28,28,27,.8);
  border-color:rgba(148,163,184,.2);
}

[data-theme="dark"] .page-simulator-support .support-input-area{
  background:rgba(28,28,27,.92);
  border-top-color:rgba(148,163,184,.2);
}

[data-theme="dark"] .page-simulator-support .support-input-area:has(.support-send-btn){
  background:rgba(28,28,27,.92);
}

[data-theme="dark"] .page-simulator-support .support-input-typing:has(.support-input-hidden:focus){
  border-color:rgba(148,163,184,.28);
  box-shadow:0 0 0 3px rgba(148,163,184,.12);
}

[data-theme="dark"] .page-simulator-support .support-ghost-text .support-char{
  color:rgba(148,163,184,.55);
}

[data-theme="dark"] .page-simulator-support .support-ghost-text .support-char.typed{
  color:#f8fafc;
}

[data-theme="dark"] .page-simulator-support .support-typing-indicator{
  background:rgba(30,41,59,.8);
}

[data-theme="dark"] .page-simulator-support .support-typing-text{
  color:#94a3b8;
}

[data-theme="dark"] .page-simulator-support .support-typing-dot{
  background:#60a5fa;
}

[data-theme="dark"] .page-simulator-support .support-sidebar{
  background:transparent;
}

[data-theme="dark"] .page-simulator-support .support-ticket-status{
  background:rgba(255,255,255,.06);
}

[data-theme="dark"] .page-simulator-support .support-status-text{
  color:#e2e8f0;
}

[data-theme="dark"] .page-simulator-support .support-chats-section.completed .support-section-title{
  color:#4ade80;
}

[data-theme="dark"] .page-simulator-support .support-chat-item:hover{
  background:rgba(148,163,184,.15);
}

[data-theme="dark"] .page-simulator-support .support-chat-item.active{
  background:rgba(255,255,255,.08);
}

[data-theme="dark"] .page-simulator-support .support-chat-window.active{
  border-color:rgba(148,163,184,.28);
}

[data-theme="dark"] .page-simulator-support .support-chat-item.completed .support-chat-name{
  color:#4ade80;
}

[data-theme="dark"] .page-simulator-support .support-chat-name{
  color:#e2e8f0;
}

[data-theme="dark"] .page-simulator-support .support-chat-preview{
  color:#94a3b8;
}

[data-theme="dark"] .page-simulator-support .support-chat-stats{
  color:#94a3b8;
}

[data-theme="dark"] .page-simulator-support .support-completed-notice{
  background:rgba(34,197,94,.15);
  border-color:rgba(34,197,94,.3);
  color:#4ade80;
}

[data-theme="dark"] .page-simulator-support .support-chat-completed span{
  color:#64748b;
}

[data-theme="dark"] .page-simulator-support .support-completed-line{
  background:rgba(148,163,184,.15);
}

[data-theme="dark"] .page-simulator-support .support-chat-window{
  background:transparent;
  border-color:rgba(148,163,184,.2);
}

[data-theme="dark"] .page-simulator-support .support-chat-window.active{
  border-color:#60a5fa;
  box-shadow:none;
}

[data-theme="dark"] .page-simulator-support .support-window-header{
  background:transparent;
  border-color:rgba(148,163,184,.2);
}

[data-theme="dark"] .page-simulator-support .support-window-name{
  color:#e2e8f0;
}

[data-theme="dark"] .page-simulator-support .support-window-status{
  background:rgba(148,163,184,.2);
  color:#94a3b8;
}

[data-theme="dark"] .page-simulator-support .support-window-status.typing{
  background:rgba(37,99,235,.3);
  color:#60a5fa;
}

[data-theme="dark"] .page-simulator-support .support-window-status.completed{
  background:rgba(34,197,94,.3);
  color:#4ade80;
}

[data-theme="dark"] .page-simulator-support .support-chat-timer{
  color:#94a3b8;
}

[data-theme="dark"] .page-simulator-support .support-stat-wpm,
[data-theme="dark"] .page-simulator-support .support-stat-acc{
  background:rgba(37,99,235,.2);
  color:#60a5fa;
}

[data-theme="dark"] .page-simulator-support .support-chat-switch-btn,
[data-theme="dark"] .page-simulator-support .support-send-btn-small,
[data-theme="dark"] .page-simulator-support .support-minimize-btn-small,
[data-theme="dark"] .page-simulator-support .support-send-btn{
  background:rgba(59,130,246,.2);
  border-color:rgba(96,165,250,.35);
  color:#93c5fd;
}

[data-theme="dark"] .page-simulator-support .support-chat-switch-btn:hover,
[data-theme="dark"] .page-simulator-support .support-send-btn-small:not(:disabled):hover,
[data-theme="dark"] .page-simulator-support .support-minimize-btn-small:hover,
[data-theme="dark"] .page-simulator-support .support-send-btn:not(:disabled):hover{
  background:rgba(59,130,246,.28);
  border-color:rgba(147,197,253,.5);
}

[data-theme="dark"] .page-simulator-support .support-drop-overlay{
  background:rgba(37,99,235,.2);
}

[data-theme="dark"] .page-simulator-support .support-drop-overlay span{
  color:#60a5fa;
}

[data-theme="dark"] .page-simulator-support .support-chat-window.drag-target{
  border-color:#2563eb;
  box-shadow:none;
  outline:2px solid rgba(37,99,235,.3);
  outline-offset:2px;
  overflow:visible;
}

[data-theme="dark"] .page-simulator-support .support-window-mood-happy{
  color:#4ade80;
  background:rgba(34,197,94,.18);
  border-color:rgba(74,222,128,.36);
}

[data-theme="dark"] .page-simulator-support .support-window-mood-neutral{
  color:#facc15;
  background:rgba(250,204,21,.16);
  border-color:rgba(250,204,21,.34);
}

[data-theme="dark"] .page-simulator-support .support-window-mood-sad{
  color:#f87171;
  background:rgba(239,68,68,.16);
  border-color:rgba(248,113,113,.34);
}

.page-simulator-support .support-chat-window.drag-over{
  border-color:#60a5fa;
  box-shadow:none;
  outline:4px solid rgba(96,165,250,.4);
  outline-offset:2px;
  overflow:visible;
  transform:scale(1.01);
}

.page-simulator-support .support-chat-window.drag-target{
  border-color:#2563eb;
  box-shadow:none;
  outline:2px solid rgba(37,99,235,.25);
  outline-offset:2px;
  overflow:visible;
}

[data-theme="dark"] .page-simulator-support .support-message-text{
  background:rgba(30,41,59,.8);
}

[data-theme="dark"] .page-simulator-support .support-message-bubble{
  background:#2563eb;
}

[data-theme="dark"] .page-simulator-support .support-window-bottom-bar{
  background:rgba(15,23,42,.92);
  border-top-color:rgba(148,163,184,.2);
}

[data-theme="dark"] .page-simulator-support .support-minimize-btn{
  background:rgba(15,23,42,.7);
  border-color:rgba(148,163,184,.25);
  color:#e2e8f0;
  box-shadow:none;
}

[data-theme="dark"] .page-simulator-support .support-minimize-btn:hover{
  background:rgba(30,41,59,.85);
  border-color:rgba(148,163,184,.4);
  color:#f8fafc;
}

/* Responsive */
@media (max-width:1200px){
  .page-simulator-support .support-chat-windows.layout-3{
    grid-template-columns:1fr 1fr;
    overflow-y:auto;
  }
}

@media (max-width:900px){
  .page-simulator-support .support-main{
    grid-template-columns:1fr;
  }
  
  .page-simulator-support .support-sidebar{
    width:100%;
    order:-1;
  }
  
  .page-simulator-support .support-chat-list{
    flex-direction:row;
    overflow-x:auto;
  }
  
  .page-simulator-support .support-chat-windows{
    grid-template-columns:1fr !important;
    max-height:70vh;
    overflow-y:auto;
  }
  
  .page-simulator-support .support-chat-window{
    min-height:400px;
  }
}

@media (max-width:600px){
  .page-simulator-support .support-header{
    flex-direction:column;
    align-items:flex-start;
    gap:16px;
  }
  
  .page-simulator-support .support-message{
    max-width:95%;
  }
}