/* NorcomDesk Central v1.0 */



.desk-toolbar{

  display:flex;

  justify-content:space-between;

  align-items:center;

  gap:12px;

  margin-bottom:15px;

}



.desk-filters{

  display:flex;

  gap:7px;

  flex-wrap:wrap;

}



.desk-shell{

  height:calc(100vh - 155px);

  min-height:600px;

  display:grid;

  grid-template-columns:310px minmax(420px,1fr) 290px;

  overflow:hidden;

  background:#fff;

  border-radius:14px;

  box-shadow:0 3px 12px rgba(30,50,80,.06);

}



.desk-queue{

  border-right:1px solid var(--border);

  overflow-y:auto;

}



.desk-queue-head{

  padding:17px;

  border-bottom:1px solid var(--border);

  font-weight:800;

}



.desk-conversation{

  padding:14px 15px;

  border-bottom:1px solid #edf0f4;

  cursor:pointer;

  transition:.15s;

}



.desk-conversation:hover{

  background:#f7fafe;

}



.desk-conversation.selected{

  background:#edf6ff;

  border-left:4px solid #0878d1;

  padding-left:11px;

}



.desk-conversation-top{

  display:flex;

  justify-content:space-between;

  align-items:center;

  gap:8px;

}



.desk-conversation-name{

  font-weight:800;

  overflow:hidden;

  text-overflow:ellipsis;

  white-space:nowrap;

}



.desk-time{

  color:#7c8796;

  font-size:11px;

  white-space:nowrap;

}



.desk-preview{

  color:#697586;

  font-size:13px;

  margin-top:6px;

  white-space:nowrap;

  overflow:hidden;

  text-overflow:ellipsis;

}



.desk-meta{

  display:flex;

  gap:5px;

  flex-wrap:wrap;

  align-items:center;

  margin-top:8px;

}



.desk-unread{

  margin-left:auto;

  min-width:20px;

  height:20px;

  padding:0 6px;

  border-radius:999px;

  background:#d92d20;

  color:#fff;

  display:inline-flex;

  justify-content:center;

  align-items:center;

  font-size:11px;

  font-weight:800;

}



.desk-badge{

  display:inline-flex;

  align-items:center;

  padding:4px 7px;

  border-radius:999px;

  font-size:11px;

  font-weight:700;

  background:#f0f2f5;

  color:#576273;

}



.desk-badge.waiting{

  background:#edf5ff;

  color:#1765a9;

}



.desk-badge.active{

  background:#e7f8f1;

  color:#087b55;

}



.desk-badge.closed{

  background:#f0f2f5;

  color:#626c7a;

}



.desk-badge.high{

  background:#fff3d8;

  color:#946200;

}



.desk-badge.urgent{

  background:#ffebe8;

  color:#b42318;

}



.desk-chat{

  display:flex;

  flex-direction:column;

  min-width:0;

}



.desk-chat-empty{

  height:100%;

  display:flex;

  align-items:center;

  justify-content:center;

  flex-direction:column;

  gap:8px;

  color:#7a8595;

  text-align:center;

}



.desk-chat-header{

  min-height:76px;

  padding:12px 16px;

  border-bottom:1px solid var(--border);

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:15px;

}



.desk-chat-title{

  font-size:17px;

  font-weight:800;

}



.desk-chat-subtitle{

  margin-top:4px;

  color:#6f7a8b;

  font-size:12px;

}



.desk-actions{

  display:flex;

  gap:6px;

  flex-wrap:wrap;

  justify-content:flex-end;

}



.desk-actions .btn{

  padding:8px 10px;

  font-size:12px;

}



.desk-messages{

  flex:1;

  overflow-y:auto;

  padding:20px;

  background:#f5f7fa;

}



.desk-message{

  display:flex;

  margin-bottom:13px;

}



.desk-message.client{

  justify-content:flex-start;

}



.desk-message.agent,

.desk-message.ai{

  justify-content:flex-end;

}



.desk-message.system{

  justify-content:center;

}



.desk-bubble{

  max-width:75%;

  border-radius:13px;

  padding:10px 12px;

  box-shadow:0 1px 3px rgba(20,30,50,.08);

  line-height:1.4;

}



.desk-message.client .desk-bubble{

  background:#fff;

  border-bottom-left-radius:3px;

}



.desk-message.agent .desk-bubble{

  background:#dff1ff;

  border-bottom-right-radius:3px;

}



.desk-message.ai .desk-bubble{

  background:#e1f7ee;

  border-bottom-right-radius:3px;

}



.desk-message.system .desk-bubble{

  max-width:85%;

  box-shadow:none;

  background:#e9edf2;

  color:#606b79;

  font-size:12px;

  text-align:center;

}



.desk-author{

  font-size:11px;

  font-weight:800;

  color:#526073;

  margin-bottom:4px;

}



.desk-message-time{

  margin-top:5px;

  text-align:right;

  color:#7d8897;

  font-size:10px;

}



.desk-composer{

  padding:12px;

  border-top:1px solid var(--border);

  display:grid;

  grid-template-columns:165px 1fr auto;

  gap:8px;

  align-items:end;

}



.desk-composer textarea{

  min-height:47px;

  max-height:130px;

}



.desk-simulation{

  padding:0 12px 12px;

  color:#748091;

  display:flex;

  align-items:center;

  gap:9px;

  font-size:11px;

}



.desk-simulation .btn{

  padding:6px 8px;

  font-size:11px;

}



.desk-client{

  border-left:1px solid var(--border);

  padding:19px;

  overflow-y:auto;

}



.desk-avatar{

  width:58px;

  height:58px;

  border-radius:50%;

  display:flex;

  align-items:center;

  justify-content:center;

  background:#eaf4ff;

  color:#0878d1;

  font-size:24px;

  font-weight:800;

}



.desk-client h3{

  margin:13px 0 20px;

}



.desk-detail{

  padding:10px 0;

  border-bottom:1px solid #edf0f4;

}



.desk-detail label{

  display:block;

  margin-bottom:4px;

  color:#758092;

  font-size:11px;

}



.desk-detail span{

  font-size:13px;

  word-break:break-word;

}



.desk-tags{

  display:flex;

  gap:5px;

  flex-wrap:wrap;

  margin-top:7px;

}



.desk-presence{

  display:inline-flex;

  align-items:center;

  gap:6px;

  padding:8px 10px;

  border:1px solid var(--border);

  border-radius:9px;

  background:#fff;

  color:#5f6a79;

  font-size:12px;

}



.desk-online-dot{

  width:8px;

  height:8px;

  border-radius:50%;

  background:#18b782;

}



.desk-global-unread{

  min-width:27px;

  height:27px;

  padding:0 7px;

  border-radius:999px;

  background:#d92d20;

  color:#fff;

  display:inline-flex;

  align-items:center;

  justify-content:center;

  font-weight:800;

  font-size:11px;

  margin-right:8px;

}



.desk-modal-list{

  max-height:330px;

  overflow:auto;

  margin-top:15px;

  border-top:1px solid #edf0f4;

}



.desk-modal-row{

  padding:11px 0;

  border-bottom:1px solid #edf0f4;

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:12px;

}



.desk-modal-row-text{

  flex:1;

}



.desk-modal-row-text small{

  display:block;

  color:#758092;

  margin-top:4px;

}



@media(max-width:1250px){

  .desk-shell{

    grid-template-columns:280px 1fr;

  }



  .desk-client{

    display:none;

  }

}



@media(max-width:800px){

  .desk-shell{

    grid-template-columns:1fr;

    height:auto;

  }



  .desk-queue{

    max-height:300px;

    border-right:0;

  }



  .desk-chat{

    min-height:600px;

  }



  .desk-composer{

    grid-template-columns:1fr;

  }



  .desk-toolbar{

    align-items:flex-start;

    flex-direction:column;

  }

}




/* WhatsApp */



.wa-grid{

  display:grid;

  grid-template-columns:360px 1fr;

  gap:25px;

  margin-top:20px;

}



.wa-status-card,

.wa-qr-card{

  border:1px solid #e1e7ef;

  border-radius:15px;

  background:#fff;

  padding:25px;

}



.wa-status-card{

  min-height:320px;

}



.wa-indicator{

  width:14px;

  height:14px;

  border-radius:50%;

  background:#98a2b3;

  margin-bottom:18px;

}



.wa-indicator.connected{

  background:#18b782;

  box-shadow:0 0 0 5px rgba(24,183,130,.12);

}



.wa-indicator.waiting{

  background:#f5a524;

}



.wa-indicator.error{

  background:#d92d20;

}



.wa-detail{

  margin-top:30px;

  padding:16px 0;

  border-top:1px solid #edf0f4;

  border-bottom:1px solid #edf0f4;

}



.wa-detail label{

  display:block;

  color:#697586;

  font-size:12px;

  margin-bottom:7px;

}



.wa-actions{

  display:flex;

  gap:10px;

  flex-wrap:wrap;

  margin-top:25px;

}



.wa-qr-card{

  min-height:430px;

  display:flex;

  align-items:center;

  justify-content:center;

  flex-direction:column;

}



.wa-qr{

  width:340px;

  max-width:100%;

}



.wa-qr-empty{

  color:#697586;

}



.wa-help{

  text-align:center;

  max-width:470px;

  color:#697586;

  margin-top:18px;

  line-height:1.5;

}



@media(max-width:900px){

  .wa-grid{

    grid-template-columns:1fr;

  }

}




/* =========================================================

   NORCOMDESK - VISUAL REFRESH

   ========================================================= */



:root{

  --bg-app:#eef2f7;

  --bg-surface:#ffffff;

  --bg-soft:#f8fafc;

  --bg-soft-2:#f1f5f9;



  --sidebar:#0f2d57;

  --sidebar-2:#123768;

  --sidebar-hover:rgba(255,255,255,.10);

  --sidebar-active:rgba(255,255,255,.16);



  --text-strong:#0f172a;

  --text:#334155;

  --muted:#64748b;



  --line:#e2e8f0;

  --line-2:#d7e0ea;



  --primary:#1677ff;

  --primary-hover:#0f67df;

  --success:#16a34a;

  --danger:#dc2626;

  --warning:#f59e0b;



  --shadow-sm:0 2px 8px rgba(15,23,42,.04);

  --shadow-md:0 10px 28px rgba(15,23,42,.08);



  --radius-sm:10px;

  --radius-md:14px;

  --radius-lg:18px;

}



*{

  box-sizing:border-box;

}



html,body{

  margin:0;

  padding:0;

  background:var(--bg-app);

  color:var(--text);

  font-family:Poppins, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  font-size:14px;

  line-height:1.4;

}



/* Estrutura geral */

body{

  background:var(--bg-app) !important;

}



h1,h2,h3,h4,h5,h6{

  margin:0;

  color:var(--text-strong);

  line-height:1.2;

}



p{

  margin:0;

  color:var(--muted);

}



.hidden{

  display:none !important;

}



/* Sidebar */

.sidebar{

  background:linear-gradient(180deg,var(--sidebar) 0%, var(--sidebar-2) 100%);

  color:#fff;

  border-right:none;

  box-shadow:var(--shadow-md);

}



.sidebar h1,

.sidebar h2,

.sidebar h3,

.sidebar .logo{

  color:#fff;

}



.sidebar .nav-item{

  color:rgba(255,255,255,.92);

  font-size:14px;

  font-weight:500;

  padding:12px 14px;

  margin:4px 10px;

  border-radius:12px;

  transition:.18s ease;

}



.sidebar .nav-item:hover{

  background:var(--sidebar-hover);

}



.sidebar .nav-item.active{

  background:var(--sidebar-active);

  color:#fff;

  font-weight:600;

}



/* Área principal */

main{

  background:var(--bg-app);

  padding:24px 26px;

}



#pageTitle,

main h1{

  font-size:22px;

  font-weight:700;

  margin-bottom:6px;

}



#pageSubtitle{

  font-size:13px;

  color:var(--muted);

}



/* Painéis genéricos */

.panel,

.wa-status-card,

.wa-qr-card,

.desk-queue,

.desk-chat,

.desk-client{

  background:var(--bg-surface);

  border:1px solid var(--line);

  border-radius:var(--radius-lg);

  box-shadow:var(--shadow-sm);

}



/* Botões */

.btn{

  border-radius:12px;

  font-size:13px;

  font-weight:600;

  padding:10px 16px;

  border:1px solid transparent;

  transition:.18s ease;

  cursor:pointer;

}



.btn-primary{

  background:var(--primary);

  color:#fff;

}



.btn-primary:hover{

  background:var(--primary-hover);

}



.btn-secondary{

  background:#fff;

  color:var(--text);

  border-color:var(--line);

}



.btn-secondary:hover{

  background:var(--bg-soft);

}



.btn-danger{

  background:#fff5f5;

  color:var(--danger);

  border-color:#fecaca;

}



.btn-danger:hover{

  background:#fee2e2;

}



/* Campos */

input,

select,

textarea{

  width:100%;

  border:1px solid var(--line-2);

  border-radius:12px;

  background:#fff;

  color:var(--text-strong);

  font-size:14px;

  padding:12px 14px;

  outline:none;

  transition:.18s ease;

}



input:focus,

select:focus,

textarea:focus{

  border-color:#93c5fd;

  box-shadow:0 0 0 4px rgba(22,119,255,.10);

}



textarea{

  resize:vertical;

  min-height:62px;

}



/* Dashboard e blocos */

#page-dashboard .panel,

#page-clients .panel,

#page-users .panel,

#page-departments .panel,

#page-financial .panel,

#page-campaigns .panel,

#page-ai .panel,

#page-whatsapp .panel{

  padding:22px;

}



.panel-header{

  display:flex;

  align-items:flex-start;

  justify-content:space-between;

  gap:14px;

  margin-bottom:18px;

}



/* =========================================================

   ATENDIMENTOS

   ========================================================= */



.desk-toolbar{

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:14px;

  margin-bottom:16px;

  flex-wrap:wrap;

}



.desk-filters{

  display:flex;

  gap:10px;

  flex-wrap:wrap;

}



.desk-shell{

  display:grid;

  grid-template-columns:310px minmax(0,1fr) 290px;

  gap:16px;

  align-items:stretch;

}



.desk-queue,

.desk-chat,

.desk-client{

  min-height:640px;

}



.desk-queue{

  overflow:hidden;

}



.desk-queue-head{

  padding:18px 18px 14px;

  border-bottom:1px solid var(--line);

  font-size:15px;

  font-weight:700;

  color:var(--text-strong);

}



#deskConversationList{

  display:flex;

  flex-direction:column;

}



#deskConversationList > div{

  padding:16px 16px 14px;

  border-bottom:1px solid var(--line);

  transition:.18s ease;

  cursor:pointer;

}



#deskConversationList > div:hover{

  background:var(--bg-soft);

}



#deskConversationList > div:last-child{

  border-bottom:none;

}



.desk-chat{

  display:flex;

  flex-direction:column;

  overflow:hidden;

}



.desk-chat-header{

  display:flex;

  align-items:flex-start;

  justify-content:space-between;

  gap:14px;

  padding:18px 18px 16px;

  border-bottom:1px solid var(--line);

  background:linear-gradient(180deg,#ffffff 0%, #fbfdff 100%);

}



.desk-chat-title{

  font-size:17px;

  font-weight:700;

  color:var(--text-strong);

}



.desk-chat-subtitle{

  font-size:12px;

  color:var(--muted);

  margin-top:4px;

}



.desk-actions{

  display:flex;

  flex-wrap:wrap;

  gap:8px;

}



.desk-actions .btn{

  padding:8px 12px;

  font-size:12px;

}



.desk-chat-empty{

  display:flex;

  flex-direction:column;

  align-items:center;

  justify-content:center;

  gap:8px;

  color:var(--muted);

  min-height:420px;

  padding:30px;

  text-align:center;

}



.desk-chat-empty strong{

  font-size:16px;

  color:var(--text-strong);

}



.desk-messages{

  flex:1;

  overflow:auto;

  padding:18px;

  background:

    radial-gradient(circle at top left, rgba(22,119,255,.03), transparent 240px),

    var(--bg-soft);

}



/* Bubbles genéricas */

#deskMessages > div{

  max-width:72%;

  width:fit-content;

  background:#fff;

  border:1px solid var(--line);

  border-radius:16px;

  box-shadow:var(--shadow-sm);

  padding:12px 14px;

  margin-bottom:12px;

}



#deskMessages > div:last-child{

  margin-bottom:0;

}



/* tenta cobrir mensagens de agente/saída */

#deskMessages .agent,

#deskMessages .from-agent,

#deskMessages .message-out,

#deskMessages .mine,

#deskMessages [data-sender="agent"]{

  margin-left:auto;

  background:#eaf3ff;

  border-color:#cfe0ff;

}



/* tenta cobrir mensagens do cliente/entrada */

#deskMessages .client,

#deskMessages .from-client,

#deskMessages .message-in,

#deskMessages [data-sender="client"]{

  background:#fff;

}



#deskMessages small,

#deskMessages .meta,

#deskMessages .message-time{

  display:block;

  margin-top:8px;

  font-size:11px;

  color:var(--muted);

}



.desk-composer{

  display:grid;

  grid-template-columns:170px 1fr auto;

  gap:10px;

  align-items:end;

  padding:16px 18px;

  border-top:1px solid var(--line);

  background:#fff;

}



.desk-composer .btn{

  height:50px;

  min-width:84px;

}



.desk-simulation{

  display:flex;

  align-items:center;

  gap:10px;

  flex-wrap:wrap;

  padding:0 18px 16px;

  color:var(--muted);

  font-size:12px;

}



.desk-simulation .btn{

  padding:8px 12px;

  font-size:12px;

}



/* Lateral do cliente */

.desk-client{

  padding:18px;

}



.desk-avatar{

  width:58px;

  height:58px;

  border-radius:50%;

  background:#eaf3ff;

  color:var(--primary);

  display:flex;

  align-items:center;

  justify-content:center;

  font-size:24px;

  font-weight:700;

  margin-bottom:14px;

}



.desk-client h3{

  font-size:16px;

  margin-bottom:10px;

}



.desk-detail{

  padding:10px 0;

  border-bottom:1px solid var(--line);

}



.desk-detail:last-child{

  border-bottom:none;

}



.desk-detail label{

  display:block;

  font-size:12px;

  font-weight:600;

  color:var(--muted);

  margin-bottom:5px;

}



.desk-detail span,

.desk-detail strong,

.desk-detail div{

  font-size:13px;

  color:var(--text-strong);

}



.desk-tags{

  display:flex;

  gap:6px;

  flex-wrap:wrap;

}



.empty-state{

  color:var(--muted);

  font-size:13px;

  padding:16px;

}



/* =========================================================

   WHATSAPP

   ========================================================= */



#page-whatsapp .panel{

  background:transparent;

  border:none;

  box-shadow:none;

  padding:0;

}



.wa-grid{

  display:grid;

  grid-template-columns:320px 1fr;

  gap:16px;

  margin-top:16px;

}



.wa-status-card,

.wa-qr-card{

  padding:22px;

}



.wa-status-card h2,

#deskWaStatus{

  font-size:18px;

}



.wa-indicator{

  width:14px;

  height:14px;

  border-radius:50%;

  background:#94a3b8;

  margin-bottom:14px;

}



.wa-indicator.connected{

  background:var(--success);

  box-shadow:0 0 0 5px rgba(22,163,74,.12);

}



.wa-indicator.waiting{

  background:var(--warning);

}



.wa-indicator.error{

  background:var(--danger);

}



.wa-detail{

  margin-top:22px;

  padding:14px 0;

  border-top:1px solid var(--line);

  border-bottom:1px solid var(--line);

}



.wa-detail label{

  display:block;

  font-size:12px;

  color:var(--muted);

  margin-bottom:6px;

}



.wa-actions{

  display:flex;

  flex-wrap:wrap;

  gap:10px;

  margin-top:20px;

}



.wa-qr-card{

  min-height:400px;

  display:flex;

  align-items:center;

  justify-content:center;

  flex-direction:column;

}



.wa-qr{

  width:280px;

  max-width:100%;

}



.wa-qr-empty{

  color:var(--muted);

}



.wa-help{

  margin-top:16px;

  max-width:420px;

  text-align:center;

  color:var(--muted);

  font-size:13px;

  line-height:1.5;

}



/* Labels / badges genéricos */

.badge,

.pill,

.tag{

  display:inline-flex;

  align-items:center;

  gap:6px;

  padding:4px 10px;

  border-radius:999px;

  background:var(--bg-soft-2);

  color:var(--text);

  font-size:12px;

  font-weight:600;

}



/* tabelas genéricas */

table{

  width:100%;

  border-collapse:collapse;

  background:#fff;

}



th, td{

  text-align:left;

  padding:12px 14px;

  border-bottom:1px solid var(--line);

  font-size:13px;

}



th{

  color:var(--muted);

  font-weight:600;

  background:#f8fafc;

}



/* Responsivo */

@media(max-width:1260px){

  .desk-shell{

    grid-template-columns:280px minmax(0,1fr);

  }



  .desk-client{

    grid-column:1 / -1;

    min-height:auto;

  }

}



@media(max-width:980px){

  main{

    padding:16px;

  }



  .desk-shell,

  .wa-grid{

    grid-template-columns:1fr;

  }



  .desk-queue,

  .desk-chat,

  .desk-client{

    min-height:auto;

  }



  .desk-composer{

    grid-template-columns:1fr;

  }



  .desk-composer .btn{

    width:100%;

  }

}






/* =========================================================

   PAINÉIS RECOLHÍVEIS - ATENDIMENTOS

   ========================================================= */



.desk-shell{

  grid-template-columns:

    300px

    minmax(0,1fr)

    285px;



  transition:

    grid-template-columns

    .22s ease;

}





/* Cabeçalhos laterais */



.desk-queue-head,

.desk-client-top{

  min-height:56px;

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:10px;

}



.desk-client-top{

  padding-bottom:14px;

  margin-bottom:4px;

  border-bottom:1px solid var(--line);

}



.desk-panel-title{

  font-size:14px;

  font-weight:700;

  color:var(--text-strong);

}





.desk-collapse-btn{

  width:30px;

  min-width:30px;

  height:30px;

  padding:0;



  border:1px solid var(--line);



  background:#fff;

  color:#64748b;



  border-radius:9px;



  display:flex;

  align-items:center;

  justify-content:center;



  font-size:22px;

  line-height:1;



  cursor:pointer;



  transition:.15s ease;

}



.desk-collapse-btn:hover{

  background:#f1f5f9;

  color:#0f172a;

}





/* =========================================================

   CONVERSAS RECOLHIDAS

   ========================================================= */



.desk-shell.desk-queue-collapsed{

  grid-template-columns:

    70px

    minmax(0,1fr)

    285px;

}





.desk-shell.desk-queue-collapsed

.desk-queue-head{

  padding:

    12px

    8px;



  justify-content:center;

}





.desk-shell.desk-queue-collapsed

.desk-queue-head

.desk-panel-title{

  display:none;

}





.desk-shell.desk-queue-collapsed

#deskConversationList

.desk-conversation{



  position:relative;



  min-height:62px;



  padding:8px !important;



  display:flex;

  align-items:center;

  justify-content:center;



  border-left:0;

}





.desk-shell.desk-queue-collapsed

#deskConversationList

.desk-conversation > *{



  display:none !important;

}





/* Avatar compacto */



.desk-shell.desk-queue-collapsed

.desk-conversation::before{



  content:

    attr(data-initial);



  width:40px;

  height:40px;



  border-radius:50%;



  display:flex;

  align-items:center;

  justify-content:center;



  background:#e8f2ff;

  color:#1677ff;



  font-size:14px;

  font-weight:700;



  border:1px solid #d3e5ff;

}





.desk-shell.desk-queue-collapsed

.desk-conversation.selected::before{



  background:#1677ff;

  color:#fff;



  border-color:#1677ff;



  box-shadow:

    0 0 0 4px

    rgba(22,119,255,.12);

}





/* Não lidas sobre o avatar */



.desk-shell.desk-queue-collapsed

.desk-conversation::after{



  content:

    attr(data-unread);



  position:absolute;



  right:8px;

  top:7px;



  min-width:18px;

  height:18px;



  padding:0 4px;



  border-radius:999px;



  display:flex;

  align-items:center;

  justify-content:center;



  background:#dc2626;

  color:#fff;



  border:2px solid #fff;



  font-size:9px;

  font-weight:700;

}





.desk-shell.desk-queue-collapsed

.desk-conversation[data-unread=""]::after{



  display:none;

}





/* =========================================================

   INFORMAÇÕES RECOLHIDAS

   ========================================================= */



.desk-client-mini{

  display:none;

}





.desk-shell.desk-info-collapsed{

  grid-template-columns:

    300px

    minmax(0,1fr)

    68px;

}





.desk-shell.desk-info-collapsed

.desk-client{



  padding:

    12px

    9px;



  overflow:hidden;

}





.desk-shell.desk-info-collapsed

.desk-client-top{



  justify-content:center;



  border-bottom:

    1px solid

    var(--line);

}





.desk-shell.desk-info-collapsed

.desk-client-top

.desk-panel-title{



  display:none;

}





.desk-shell.desk-info-collapsed

#deskClientEmpty,



.desk-shell.desk-info-collapsed

#deskClientInfo{



  display:none !important;

}





.desk-shell.desk-info-collapsed

.desk-client-mini{



  display:flex;



  flex-direction:column;



  align-items:center;



  gap:8px;



  padding-top:12px;

}





.desk-client-mini button{



  width:40px;

  height:40px;



  padding:0;



  border:1px solid var(--line);



  border-radius:11px;



  background:#fff;

  color:#64748b;



  display:flex;

  align-items:center;

  justify-content:center;



  cursor:pointer;



  transition:.15s ease;

}





.desk-client-mini button:hover{



  background:#eaf3ff;

  color:#1677ff;

  border-color:#c7ddff;

}





.desk-client-mini svg{



  width:18px;

  height:18px;



  fill:none;



  stroke:currentColor;



  stroke-width:1.8;



  stroke-linecap:round;

  stroke-linejoin:round;

}





/* =========================================================

   OS DOIS LADOS RECOLHIDOS

   ========================================================= */



.desk-shell.desk-queue-collapsed.desk-info-collapsed{



  grid-template-columns:

    70px

    minmax(0,1fr)

    68px;

}





/* O chat aproveita todo o espaço */



.desk-chat{

  min-width:0;

}





/* Tablet */



@media(max-width:1100px){



  .desk-shell{

    grid-template-columns:

      250px

      minmax(0,1fr)

      250px;

  }



  .desk-shell.desk-queue-collapsed{

    grid-template-columns:

      70px

      minmax(0,1fr)

      250px;

  }



  .desk-shell.desk-info-collapsed{

    grid-template-columns:

      250px

      minmax(0,1fr)

      68px;

  }



  .desk-shell.desk-queue-collapsed.desk-info-collapsed{

    grid-template-columns:

      70px

      minmax(0,1fr)

      68px;

  }

}






/* =========================================================

   AJUSTE VISUAL - TOPO / BOTÕES / REMOVER SIMULAÇÃO

   ========================================================= */



/* remove a área de simulação */

.desk-simulation{

  display:none !important;

}



/* título da página um pouco mais compacto */

#pageTitle,

main h1{

  font-size:18px !important;

  margin-bottom:4px !important;

}



#pageSubtitle{

  font-size:12px !important;

  color:#64748b !important;

}



/* organiza melhor a faixa superior de Atendimentos */

#page-conversations{

  display:flex;

  flex-direction:column;

  gap:16px;

}



#page-conversations > .desk-toolbar{

  background:#ffffff;

  border:1px solid #dbe3ee;

  border-radius:16px;

  padding:14px 16px;

  box-shadow:0 6px 18px rgba(15,23,42,.05);

  margin-bottom:0 !important;

}



.desk-toolbar{

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:14px;

  flex-wrap:wrap;

}



.desk-toolbar .btn-primary{

  background:linear-gradient(135deg,#1677ff 0%, #0ea5e9 100%);

  color:#fff;

  border:none;

  box-shadow:0 8px 20px rgba(22,119,255,.22);

}



.desk-toolbar .btn-primary:hover{

  filter:brightness(.97);

}



.desk-filters{

  display:flex;

  align-items:center;

  gap:10px;

  flex-wrap:wrap;

}



.desk-filters .btn-secondary{

  background:#f8fafc;

  border:1px solid #dbe3ee;

  color:#334155;

  font-weight:600;

}



.desk-filters .btn-secondary:hover{

  background:#eaf3ff;

  border-color:#b9d4ff;

  color:#0f5ed7;

}



/* melhora o topo interno do chat */

.desk-chat-header{

  padding:16px 18px !important;

  background:#fff !important;

}



.desk-chat-title{

  font-size:15px !important;

}



.desk-chat-subtitle{

  font-size:12px !important;

}



/* deixa os botões do topo do chat com cor */

.desk-actions{

  display:flex;

  gap:8px;

  flex-wrap:wrap;

}



.desk-actions .btn{

  border:none !important;

  color:#fff !important;

  box-shadow:0 6px 14px rgba(15,23,42,.10);

  font-size:12px !important;

  font-weight:600 !important;

  padding:8px 13px !important;

}



.desk-actions .btn:hover{

  filter:brightness(.96);

  transform:translateY(-1px);

}



/* assumir */

#deskAssignSelfBtn{

  background:#2563eb !important;

}



/* transferir */

#deskTransferBtn{

  background:#f59e0b !important;

}



/* atribuir */

#deskAssignUserBtn{

  background:#0f766e !important;

}



/* prioridade */

#deskPriorityBtn{

  background:#eab308 !important;

  color:#1f2937 !important;

}



/* etiquetas */

#deskTagsBtn{

  background:#8b5cf6 !important;

}



/* mensagens rápidas */

#deskQuickRepliesBtn{

  background:#06b6d4 !important;

}



/* encerrar */

#deskCloseBtn{

  background:#ef4444 !important;

  color:#fff !important;

}



/* composer mais organizado */

.desk-composer{

  padding:14px 18px !important;

  border-top:1px solid #e2e8f0 !important;

  background:#fff !important;

}



.desk-composer textarea{

  min-height:52px !important;

}



/* botão enviar */

.desk-composer .btn-primary{

  background:linear-gradient(135deg,#1677ff 0%, #2563eb 100%) !important;

  border:none !important;

  color:#fff !important;

  box-shadow:0 8px 18px rgba(37,99,235,.22);

}



.desk-composer .btn-primary:hover{

  filter:brightness(.97);

}



/* melhora a coluna da conversa */

.desk-queue-head{

  background:#fff;

}



.desk-conversation,

#deskConversationList > div{

  transition:.16s ease;

}



.desk-conversation:hover,

#deskConversationList > div:hover{

  background:#f8fbff !important;

}



/* responsivo */

@media(max-width:980px){

  #page-conversations > .desk-toolbar{

    padding:12px;

  }



  .desk-actions .btn{

    width:auto;

  }

}