/* Central Fê v4 — cabeçalho operacional compacto + UX Copiloto v3 */

/* ---- aproveitamento vertical ---- */
.app-shell{height:100dvh;display:flex;flex-direction:column;overflow:hidden}
.topbar{flex:0 0 76px;height:76px}
.workspace-heading{display:none!important}
.error-banner{flex:0 0 auto;margin:12px 28px 0}
.workspace{flex:1;height:auto!important;min-height:0!important;margin-top:14px;margin-bottom:18px}

/* ---- informações operacionais dentro da faixa superior ---- */
.topbar-dashboard{display:flex;align-items:center;gap:24px;margin-left:24px;min-width:0}
.topbar-section-title{display:flex;flex-direction:column;justify-content:center;gap:3px;padding-left:24px;border-left:1px solid #36505a;white-space:nowrap}
.topbar-section-title .eyebrow{color:#8faab3;font-size:10px;letter-spacing:1.25px}
.topbar-section-title>strong{color:#fff;font-size:18px;line-height:1.1;letter-spacing:-.35px}
.topbar-summary{display:flex;align-items:center;gap:15px;color:#b8cad1;font-size:12px;white-space:nowrap}
.topbar-summary>span{display:flex;align-items:center;gap:5px}
.topbar-summary strong{color:#f1f7f8;font-size:13px}
.topbar-approval{color:#e8bf79;border-left:1px solid #36505a;padding-left:15px}
.topbar-approval strong{color:#f4d49e}
.topbar-sync{display:flex;align-items:center;gap:7px;flex:0 0 auto;color:#a7bec8;font-size:12px;white-space:nowrap}
.topbar-sync .dot{background:#56b9aa}
.topbar-sync.offline{color:#f1b4aa}
.topbar-sync.offline .dot{background:#dd6c5d}

/* ---- painel Copiloto ampliado (mantido da v3) ---- */
.workspace{grid-template-columns:310px minmax(360px,1fr) clamp(440px,29vw,560px)}
.fe-content{padding:20px 22px 26px}
.suggestion{padding:17px}
.suggestion textarea{min-height:235px;max-height:44vh;font-size:14px;line-height:1.72;padding-top:14px}
.history{margin-top:18px;border:1px solid #dce5e8;border-radius:10px;background:#fff;overflow:hidden}
.history>summary{padding:14px 15px;background:#f8fafb;border-bottom:1px solid transparent;font-weight:650;color:#506b75;list-style-position:inside}
.history[open]>summary{border-bottom-color:#e7edef}
.history>div{padding:13px 15px;border-bottom:1px solid #edf1f2}
.history>div:last-child{border-bottom:0}
.history>div strong{display:block;color:#506b75;margin-bottom:7px}
.history>div p{font-size:12px;line-height:1.58;color:#60747e;margin:0 0 6px;white-space:pre-wrap;overflow-wrap:anywhere}
.history>div small{color:#95a2a8}
.history[open]{max-height:330px;overflow:auto;scrollbar-width:thin}
.operational{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:16px}
.operational h3{grid-column:1/-1;margin:0 0 2px}
.operational>div{margin:0;display:flex;flex-direction:column;justify-content:flex-start;gap:5px;min-height:68px;padding:10px;border:1px solid #e1e8eb;border-radius:8px;background:#fff}
.operational strong{overflow-wrap:anywhere}
.last-message{background:#f7f9fa;border-left-width:3px;border-radius:0 7px 7px 0;padding:10px 12px;margin-bottom:13px}
.last-message p{margin-top:5px;max-height:58px;overflow:auto}

/* ---- feedback imediato ao aprovar ---- */
.bubble.optimistic{align-self:flex-end;background:#eef7f5;border:1px dashed #a9cec7;border-radius:12px 0 12px 12px;min-width:255px;max-width:78%;padding:13px 15px}
.bubble.optimistic.failed{background:#fff1ef;border-color:#e7b3aa}
.optimistic-row{display:flex;align-items:flex-start;gap:10px;color:#54736e}
.optimistic-row strong{display:block;font-size:13px;color:#2f655d}
.optimistic-row p{margin-top:3px;font-size:12px;line-height:1.45;color:#76908b}
.bubble.optimistic.failed .optimistic-row,.bubble.optimistic.failed .optimistic-row strong,.bubble.optimistic.failed .optimistic-row p{color:#9c5148}
.central-fe-spin{display:inline-block;animation:central-fe-spin 1s linear infinite}
@keyframes central-fe-spin{to{transform:rotate(360deg)}}

@media(min-width:1600px){
  .workspace{grid-template-columns:340px minmax(460px,1fr) 540px}
  .messages{padding-left:38px;padding-right:38px}
}

@media(max-width:1400px){
  .topbar-dashboard{gap:14px;margin-left:10px}
  .topbar-section-title{padding-left:16px}
  .topbar-summary{gap:10px}
  .topbar-approval{padding-left:10px}
}

@media(max-width:1300px){
  .workspace{grid-template-columns:270px minmax(330px,1fr) 430px}
  .operational{grid-template-columns:1fr}
  .operational h3{grid-column:auto}
  .operational>div{min-height:0;flex-direction:row;justify-content:space-between}
}

@media(max-width:1180px){
  .topbar-section-title .eyebrow{display:none}
  .topbar-section-title>strong{font-size:15px}
  .topbar-sync{display:none}
}

@media(max-width:1050px){
  .app-shell{height:auto;min-height:100dvh;overflow:visible}
  .workspace{flex:none;height:auto!important;min-height:650px!important;grid-template-columns:250px 1fr}
  .chat{min-height:630px;max-height:760px}
  .fe-panel{grid-column:1/-1;border-top:1px solid #dce4e8}
  .fe-content{display:grid;grid-template-columns:minmax(250px,.8fr) minmax(420px,1.2fr);gap:16px}
  .suggestion,.history{grid-column:2}
  .suggestion{grid-row:1/6}
  .history{grid-row:6/10;max-height:300px}
  .customer-context,.mode-select-label,.mode-description,.last-message,.ask-fe,.operational,.panel-footer{grid-column:1}
}

@media(max-width:980px){
  .topbar-dashboard{display:none}
}

@media(max-width:700px){
  .topbar{height:64px;flex-basis:64px}
  .workspace{display:block;margin-top:10px}
  .error-banner{margin-left:12px;margin-right:12px}
  .fe-content{display:block;padding:20px}
  .suggestion textarea{min-height:190px}
  .history[open]{max-height:240px}
}

@media(prefers-reduced-motion:reduce){.central-fe-spin{animation:none}}