:root{font-family:system-ui,-apple-system,'Segoe UI',sans-serif;background:#f1f6f2;color:#173c2c}
*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.45}
.shell{max-width:680px;margin:auto;padding:clamp(12px,3vw,28px)}.brand{display:flex;align-items:center;gap:12px;margin:10px 0 24px}.brand-logo{display:block;width:48px;height:56px;object-fit:contain;flex:0 0 auto}
.brand strong{display:block;letter-spacing:.08em}.brand small{display:block;color:#668275;font-size:.8rem}
.chat,.queue,.agent-chat{border:1px solid #dce8df;background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 20px 45px #15452a13}
.chat-head{background:#216b40;color:white;padding:20px;display:flex;justify-content:space-between;gap:16px}
.chat-head h1{font-size:1.3rem;margin:0}.chat-head p{margin:6px 0;font-size:.9rem}
.chat-head select{display:block;border:0;border-radius:8px;padding:7px;margin-top:5px}
.messages{min-height:280px;height:min(53vh,500px);overflow-y:auto;background:#f7faf7;padding:18px;display:flex;flex-direction:column;gap:10px}
.hint{font-size:.9rem;color:#5f796a}.bubble{max-width:80%;padding:12px 15px;border-radius:16px;background:#e5eee7;margin:0;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere}
.bubble.mine{margin-left:auto;background:#d1efda;border-bottom-right-radius:4px}.bubble.theirs{margin-right:auto;border-bottom-left-radius:4px}
.composer{display:flex;gap:10px;padding:14px;border-top:1px solid #e4ece7}.composer input{flex:1;min-width:0;padding:12px;border:1px solid #c8d9cc;border-radius:10px}
.composer button,.dev-auth button,.agent-chat header button,.queue button{background:#1b7745;color:#fff;padding:12px 15px;border:0;border-radius:10px;font-weight:700}
button:focus-visible,input:focus-visible{outline:3px solid #ed9639;outline-offset:2px}
.status,footer{font-size:.8rem;color:#668275}.status{margin:0;padding:0 15px 12px}footer{text-align:center;margin:16px}
.operator-shell{max-width:1400px;margin:auto;padding:20px}.dev-auth{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:16px;background:#fff;border-radius:12px;margin-bottom:14px}.dev-auth input{min-width:280px;padding:10px}
.workspace{display:grid;grid-template-columns:minmax(280px,32%) 1fr;gap:15px}.queue{padding:15px}.queue h1{font-size:1.1rem}
.queue-item{display:block;width:100%;text-align:left;background:#f0f6f1!important;color:#173c2c!important;margin:8px 0;font-size:.8rem}
.queue-item.active{outline:2px solid #238451}.agent-chat header{padding:15px;display:flex;align-items:center;justify-content:space-between}.agent-chat h2{font-size:1rem}
.agent-chat header button{padding:8px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:760px){.workspace{grid-template-columns:1fr}.dev-auth input{min-width:0;width:100%}}

.identification{
 padding:18px;
 background:#f7faf7;
 border-bottom:1px solid #dce8df
}
.identification h2{margin:0 0 6px;font-size:1.1rem}
.identification p{margin:0 0 14px}
.identification form{
 display:grid;
 grid-template-columns:1fr 1fr;
 gap:12px
}
.identification label{display:flex;flex-direction:column;gap:5px}
.identification input{
 padding:11px;
 border:1px solid #cbd9cf;
 border-radius:9px;
 font:inherit
}
.identification button{
 grid-column:1/-1;
 padding:12px;
 border:0;
 border-radius:10px;
 font-weight:700;
 background:#1b7745;
 color:#fff
}
@media(max-width:600px){
 .identification form{grid-template-columns:1fr}
}

.lead-card{
 padding:12px 15px;
 border-top:1px solid #dce8df;
 border-bottom:1px solid #dce8df;
 background:#f7faf7
}
.lead-card h3{margin:0 0 10px;font-size:.95rem}
.lead-grid{
 display:grid;
 grid-template-columns:repeat(3,minmax(0,1fr));
 gap:10px
}
.lead-grid div{min-width:0}
.lead-grid small{
 display:block;
 opacity:.65;
 margin-bottom:2px
}
.lead-grid strong{
 display:block;
 font-size:.85rem;
 overflow-wrap:anywhere
}
@media(max-width:760px){
 .lead-grid{grid-template-columns:1fr 1fr}
}

/* ==================================================
   City Tour Chat — conversational UX
   ================================================== */

.message-row{
  display:flex;
  align-items:flex-end;
  gap:9px;
  max-width:88%;
}

.message-row.visitor{
  align-self:flex-end;
  flex-direction:row-reverse;
}

.message-row.assistant,
.message-row.agent{
  align-self:flex-start;
}

.chat-avatar{
  width:34px;
  height:34px;
  flex:0 0 34px;
  border-radius:50%;
  display:grid;
  place-items:center;
  overflow:hidden;
  font-size:.72rem;
  font-weight:800;
  background:#fff;
  border:1px solid #d8e5dc;
  box-shadow:0 3px 10px #173c2614;
}

.chat-avatar img{
  width:72%;
  height:72%;
  object-fit:contain;
}

.message-row.visitor .chat-avatar{
  background:#216b40;
  color:#fff;
  border-color:#216b40;
}

.message-row.agent .chat-avatar{
  background:#edf4ef;
  color:#216b40;
}

.message-row .bubble{
  max-width:100%;
  box-shadow:0 2px 8px #183d2610;
}

.message-row.assistant .bubble,
.message-row.agent .bubble{
  border-bottom-left-radius:4px;
}

.message-row.visitor .bubble{
  border-bottom-right-radius:4px;
}

.send-button{
  width:46px;
  height:46px;
  flex:0 0 46px;
  padding:0 !important;
  border-radius:50% !important;
  display:grid;
  place-items:center;
}

.send-button svg{
  width:22px;
  height:22px;
  fill:currentColor;
  transform:translateX(1px);
}

.composer input{
  min-height:46px;
}

@media(max-width:600px){
  .messages{
    padding:14px 11px;
  }

  .message-row{
    max-width:94%;
  }

  .chat-avatar{
    width:30px;
    height:30px;
    flex-basis:30px;
  }

  .composer{
    gap:8px;
    padding:10px;
  }

  .send-button{
    width:44px;
    height:44px;
    flex-basis:44px;
  }
}

/* Chat UX — avatar and sender refinement */

.message-content{
  min-width:0;
  max-width:100%;
}

.message-identity{
  display:block;
  margin:0 0 4px 5px;
  font-size:.72rem;
  font-weight:700;
  color:#52705d;
}

.chat-avatar svg{
  width:19px;
  height:19px;
  fill:currentColor;
}

.message-row.assistant .chat-avatar{
  width:38px;
  height:38px;
  flex-basis:38px;
}

.message-row.assistant .chat-avatar img{
  width:76%;
  height:76%;
}

.message-row.visitor .chat-avatar{
  color:#fff;
}

.message-content .bubble{
  max-width:100%;
}

/* CRM — operator identity and user administration */
.operator-userbar{
 display:flex;justify-content:space-between;align-items:center;gap:12px;
 padding:10px 14px;margin:0 0 14px;background:#fff;border-radius:12px
}
.operator-userbar a,.admin-nav a{color:#1b7745;font-weight:700}
.admin-head{justify-content:flex-start}
.admin-nav{margin-left:auto;display:flex;align-items:center;gap:12px}
.admin-nav button,.admin-card button{
 background:#1b7745;color:#fff;padding:10px 13px;border:0;
 border-radius:9px;font-weight:700
}
.admin-grid{display:grid;grid-template-columns:minmax(280px,360px) 1fr;gap:16px}
.admin-card{
 background:#fff;border:1px solid #dce8df;border-radius:16px;padding:18px;
 box-shadow:0 20px 45px #15452a13
}
.admin-card h1{font-size:1.15rem;margin:0 0 6px}
.admin-form{display:grid;gap:12px;margin-top:16px}
.admin-form label{display:grid;gap:5px;font-size:.85rem;font-weight:700}
.admin-form input,.admin-form select{
 width:100%;padding:11px;border:1px solid #c8d9cc;border-radius:9px
}
.admin-actions{display:flex;gap:8px;flex-wrap:wrap}
.admin-card button.secondary{background:#e7eee9;color:#173c2c}
.admin-card button.danger{background:#9b2f2f;margin-left:6px}
.admin-title{display:flex;justify-content:space-between;align-items:start;gap:12px}
.users-table-wrap{overflow-x:auto;margin-top:12px}
.users-table{width:100%;border-collapse:collapse;font-size:.84rem}
.users-table th,.users-table td{
 text-align:left;padding:10px 8px;border-bottom:1px solid #e3ebe5;vertical-align:middle
}
.users-table th{color:#52705d;font-size:.75rem;text-transform:uppercase}
.users-table td:last-child{white-space:nowrap}
.users-table button{padding:7px 9px;font-size:.78rem}
#admin-status[data-error="true"]{color:#9b2f2f}
@media(max-width:900px){
 .admin-grid{grid-template-columns:1fr}
 .admin-head{flex-wrap:wrap}
 .admin-nav{width:100%;margin-left:0}
}

/* CHAT-05A — shared queue and supervision */
.conversation-actions{display:flex;gap:7px;flex-wrap:wrap}
.transfer-panel{
 display:flex;align-items:end;gap:8px;flex-wrap:wrap;
 padding:12px 15px;background:#fff8eb;border-top:1px solid #ead9bd;
 border-bottom:1px solid #ead9bd
}
.transfer-panel[hidden]{display:none}
.transfer-panel label{font-size:.8rem;font-weight:700}
.transfer-panel select,.transfer-panel input{
 padding:9px;border:1px solid #c8d9cc;border-radius:9px;background:#fff
}
.transfer-panel input{min-width:220px;flex:1}
.transfer-panel button{
 background:#1b7745;color:#fff;padding:9px 11px;border:0;border-radius:9px;font-weight:700
}
.transfer-panel button.secondary{background:#e7eee9;color:#173c2c}


/* CHAT-05B — operational metrics and SLA */
.operator-links{display:flex;align-items:center;gap:12px}
.operator-links button{background:#1b7745;color:#fff;border:0;border-radius:9px;padding:8px 11px;font-weight:700}
.metrics-panel{background:#fff;border:1px solid #dce8df;border-radius:16px;padding:16px;margin-bottom:15px;box-shadow:0 20px 45px #15452a13}
.metrics-head{display:flex;justify-content:space-between;align-items:end;gap:16px}
.metrics-head h1{margin:0;font-size:1.1rem}.metrics-head small{color:#668275}.metrics-head label{font-size:.8rem;font-weight:700}.metrics-head select{display:block;margin-top:4px;padding:8px;border:1px solid #c8d9cc;border-radius:9px;background:#fff}
.metrics-summary{display:grid;grid-template-columns:repeat(5,minmax(110px,1fr));gap:10px;margin:16px 0}
.metrics-summary div{background:#f0f6f1;border-radius:12px;padding:12px}.metrics-summary small{display:block;color:#668275}.metrics-summary strong{display:block;font-size:1.35rem;margin-top:3px}
.metrics-table-wrap{overflow-x:auto}.metrics-table{width:100%;border-collapse:collapse;font-size:.82rem}.metrics-table th,.metrics-table td{text-align:left;padding:9px 7px;border-bottom:1px solid #e3ebe5;white-space:nowrap}.metrics-table th{font-size:.72rem;text-transform:uppercase;color:#52705d}
@media(max-width:760px){.metrics-summary{grid-template-columns:1fr 1fr}.metrics-head{align-items:start;flex-direction:column}}

/* CHAT-06A — commercial opportunity */
.opportunity-card{padding:13px 15px;background:#fff8eb;border-top:1px solid #ead9bd;border-bottom:1px solid #ead9bd}
.opportunity-head{display:flex;justify-content:space-between;gap:12px;align-items:start}.opportunity-head h3{margin:0;font-size:.95rem}.opportunity-head small{color:#7b6746}
.opportunity-grid{display:grid;grid-template-columns:2fr 1fr 1fr 2fr auto;gap:9px;align-items:end;margin-top:10px}
.opportunity-grid label{display:grid;gap:4px;font-size:.76rem;font-weight:700}.opportunity-grid input,.opportunity-grid select{min-width:0;width:100%;padding:9px;border:1px solid #d9c9aa;border-radius:9px;background:#fff}
.opportunity-grid button{background:#1b7745;color:#fff;border:0;border-radius:9px;padding:10px 12px;font-weight:700;white-space:nowrap}
@media(max-width:1000px){.opportunity-grid{grid-template-columns:1fr 1fr}.opportunity-grid button{grid-column:1/-1}}
@media(max-width:600px){.opportunity-grid{grid-template-columns:1fr}}