:root {
  font-family: "Segoe UI", sans-serif;
  color: #303348;
  background: #eef1f4;
  font-synthesis: none;
  --purple: #6d4eff;
  --line: #e7e9ef;
  --muted: #60697c;
  --panel-width: 338px;
  --gutter: 22px;
  --glass: #fffffff2;
  --shadow: 0 12px 38px #27344c0d, 0 1px 3px #27344c08;
}
* { box-sizing: border-box; }
body { margin: 0; }
[hidden] { display: none !important; }
button, input, select { font: inherit; }
button { cursor: pointer; border: 0; background: none; color: inherit; }
button:hover { background-color: #f0edf9; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid #9e89fb; outline-offset: 3px; }
.topbar { position: relative; z-index: 10; height: 64px; padding: 0 var(--gutter); display: flex; align-items: center; gap: 14px; background: #fff; border-bottom: 1px solid var(--line); }
.brand { display: flex; gap: 10px; align-items: center; color: inherit; text-decoration: none; font-size: 20px; font-weight: 700; }
.brand img { width: 34px; height: 34px; object-fit: contain; }
.brand small { display: block; font-size: 11px; font-weight: 400; color: var(--muted); }
.demo-badge { margin-left: auto; font-size: 10px; color: var(--muted); }
.demo-badge i, .live-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #24af9b; margin-right: 7px; }
.subtle { border-radius: 7px; padding: 9px 10px; font-size: 11px; font-weight: 600; background: #f5f5f9; color: #625a7f; }
.app { position: relative; height: calc(100dvh - 64px); min-height: 610px; overflow: hidden; }
.workspace, .stage, #world { position: absolute; inset: 0; }
.stage { overflow: hidden; }
#world canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.toolbar { position: absolute; top: 24px; left: var(--gutter); right: calc(var(--panel-width) + 2 * var(--gutter)); z-index: 3; pointer-events: none; }
.toolbar button, .toolbar input, .toolbar select, .toolbar details { pointer-events: auto; }
.demo-options { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin-top: 12px; }
.niche-control { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 600; color: #625a7f; }
.demo-options select, .settings-fields input { min-width: 0; border: 1px solid #dedee9; border-radius: 7px; padding: 8px; background: #fffffff5; color: #303348; font-size: 12px; }
.demo-settings { position: relative; font-size: 11px; }
.demo-settings summary { cursor: pointer; padding: 9px 10px; border-radius: 7px; background: #fffffff2; color: #625a7f; font-weight: 600; }
.demo-settings summary:focus-visible { outline: 3px solid #9e89fb; outline-offset: 3px; }
.settings-fields { position: absolute; top: calc(100% + 8px); left: 0; width: 270px; max-width: calc(100vw - 32px); padding: 16px; border: 1px solid white; border-radius: 12px; background: #fff; box-shadow: 0 12px 38px #27344c26; }
.settings-fields label { display: grid; gap: 6px; margin-bottom: 13px; font-size: 12px; font-weight: 600; }
.settings-fields p { margin: 0; font-size: 11px; line-height: 1.5; color: var(--muted); }
.toolbar:has(.demo-settings[open]) { z-index: 9; }
h1 { margin: 0; font-weight: 600; letter-spacing: -.5px; font-size: 21px; }
h2 { margin: 0; font-size: 17px; font-weight: 650; }
.eyebrow { margin: 0 0 5px; font-size: 11px; font-weight: 500; color: var(--muted); }
.totals { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 630px; margin-top: 12px; background: var(--glass); border: 1px solid #fff; border-radius: 12px; padding: 8px 0; box-shadow: var(--shadow); overflow: visible; }
.totals > button { min-width: 0; padding: 5px 13px; border-right: 1px solid var(--line); text-align: left; border-radius: 5px; }
.totals > button:last-child { border-right: 0; }
.totals > button:hover { background: #f0edf9; }
.totals > button.active { background: #eee9fa; }
.totals small { display: block; font-size: 10px; color: var(--muted); line-height: 1.4; }
.totals b { display: block; margin-top: 7px; font-size: 24px; line-height: 1.2; font-weight: 600; letter-spacing: -.6px; font-variant-numeric: tabular-nums; }
#metric-negotiating { font-size: 18px; margin-top: 11px; overflow-wrap: anywhere; }
.scene-top { position: absolute; top: 23px; right: var(--gutter); width: var(--panel-width); z-index: 4; display: flex; flex-direction: column; align-items: stretch; gap: 9px; }
.scene-top > span { font-size: 11px; }
.scene-actions { display: flex; gap: 5px; }
.scene-top .subtle { flex: 1; min-width: 0; background: white; font-size: 10px; padding: 8px 6px; line-height: 1.35; }
.scene-hint { position: absolute; bottom: 28px; left: var(--gutter); font-size: 11px; color: var(--muted); pointer-events: none; }
.scene-hint span { display: block; margin-top: 4px; font-size: 10px; color: #939aa6; }
.inbox { position: absolute; z-index: 5; right: var(--gutter); top: 102px; width: var(--panel-width); height: min(720px, calc(100% - 222px)); display: flex; flex-direction: column; background: var(--glass); backdrop-filter: blur(12px); border: 1px solid white; border-radius: 14px; overflow: hidden; box-shadow: var(--shadow); }
#list-panel, #chat-panel, #attention-panel, #metric-panel { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.panel-modes, .case-tabs { display: flex; flex-shrink: 0; gap: 5px; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.panel-modes button, .case-tabs button { min-height: 35px; padding: 7px 8px; border-radius: 6px; font-size: 11px; color: var(--muted); }
.panel-modes button.active, .case-tabs button.active { background: #efeafa; color: #6847bd; font-weight: 600; }
.panel-modes .count { padding: 3px 5px; margin-left: 3px; font-variant-numeric: tabular-nums; }
.panel-explanation { margin: 0; padding: 0 17px 14px; font-size: 12px; line-height: 1.5; color: var(--muted); }
#metric-panel .panel-heading { justify-content: flex-start; gap: 8px; }
#metric-title { font-size: 15px; }
.attention-row, .metric-row { display: block; width: 100%; padding: 12px 10px; border-bottom: 1px solid var(--line); border-radius: 7px; text-align: left; font-size: 12px; }
.attention-row b, .metric-row b { display: block; margin-bottom: 5px; }
.attention-row span { display: block; margin: 5px 0; line-height: 1.5; }
.attention-action { color: #66508e; }
.operation-step small { display: block; color: var(--muted); }
.operation-step b { display: block; }
.attention-row small, .metric-row small { display: block; color: var(--muted); line-height: 1.5; }
.attention-reason { color: #8e6421; }
.panel-heading { display: flex; align-items: center; justify-content: space-between; padding: 18px 17px 13px; }
.count { padding: 5px 8px; background: #efebfb; color: #7455bc; font-size: 11px; border-radius: 6px; }
.team { display: flex; flex-wrap: wrap; gap: 5px; margin: 0 16px 13px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.team button { display: flex; align-items: center; gap: 4px; font-size: 10px; border: 1px solid #e9e9ef; border-radius: 6px; padding: 6px 7px; }
.team button.active { color: #6144b8; background: #f0eafb; border-color: #e1d6fa; }
.team b { font-size: 9px; font-weight: 500; color: #898598; }
.team i { display: none; }
.search { display: flex; gap: 8px; align-items: center; background: #f5f6f9; border: 1px solid var(--line); border-radius: 8px; margin: 0 16px 10px; padding: 8px 10px; }
.search span { font-size: 21px; line-height: 20px; color: #9794a5; }
.search input { min-width: 0; width: 100%; border: 0; background: none; font-size: 12px; color: inherit; }
.filters { display: flex; gap: 4px; padding: 0 16px; }
.filters button { font-size: 11px; padding: 7px; border-radius: 6px; color: var(--muted); }
.filters button.active { background: #efeafa; color: #6847bd; font-weight: 600; }
.list-help { margin: 12px 17px 6px; font-size: 10px; color: var(--muted); }
.flow-list { flex: 1; overflow: auto; padding: 0 10px 10px; scrollbar-width: thin; }
.flow-row { width: 100%; display: flex; gap: 10px; padding: 13px 7px; border-bottom: 1px solid #efeff4; border-radius: 7px; text-align: left; }
.avatar { display: grid; place-items: center; flex-shrink: 0; width: 33px; height: 33px; border-radius: 10px; font-size: 11px; font-weight: 650; background: #eee8fa; color: #755bc0; }
.flow-text { flex: 1; min-width: 0; }
.row-top, .row-bottom { display: flex; justify-content: space-between; align-items: center; gap: 7px; }
.row-top b { font-size: 12px; font-weight: 650; }
.row-top small, .row-bottom small { font-size: 9px; color: #9691a3; }
.flow-text p { margin: 5px 0 8px; font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.status { display: inline-block; font-size: 10px; padding: 4px 6px; border-radius: 5px; background: #f0ebfa; color: #7658aa; }
.status.waiting { background: #fff3da; color: #967332; }
.status.order { background: #e5f7ef; color: #2e886d; }
.status.lost { background: #fbe9ec; color: #ac6572; }
.inbox-foot { padding: 12px 16px; border-top: 1px solid var(--line); font-size: 9px; color: #8f899e; }
.chat-header { display: flex; align-items: center; gap: 10px; padding: 17px 12px; }
.back { font-size: 20px; padding: 6px; border-radius: 6px; }
.chat-header h2 { font-size: 14px; }
.chat-header div > span { font-size: 10px; color: var(--muted); }
.chat-context { display: flex; align-items: center; justify-content: space-between; padding: 0 16px 12px; gap: 7px; border-bottom: 1px solid var(--line); }
#conversation-mode { display: flex; flex: 1; min-height: 0; flex-direction: column; }
.case-tabs { padding: 6px 16px; }
.case-tabs button { flex: 1; }
#operation-mode { flex: 1; min-height: 0; overflow: auto; padding: 17px 16px; scrollbar-width: thin; }
.operation-summary h3 { margin: 0 0 10px; font-size: 15px; }
.operation-summary p { font-size: 12px; line-height: 1.6; color: var(--muted); }
#operation-steps { margin: 18px 0; }
#operation-steps > * { border-left: 2px solid #d9d0f1; padding: 8px 0 8px 14px; font-size: 12px; line-height: 1.6; }
#operation-steps .current { border-color: var(--purple); background: #f3effb; }
#operation-steps p { margin: 3px 0; color: var(--muted); }
#operation-conversation { width: 100%; min-height: 40px; }
.conversation { display: flex; flex-direction: column; gap: 10px; flex: 1; min-height: 100px; overflow: auto; scrollbar-width: thin; padding: 16px; background: #f6f7fa; }
.chat-bubble { align-self: flex-start; flex-shrink: 0; max-width: 93%; border: 1px solid #eaeaf0; background: white; border-radius: 11px 11px 11px 3px; padding: 10px 12px; }
.chat-bubble.seller { align-self: flex-end; border-color: #e4dff2; background: #f0ecfa; border-radius: 11px 11px 3px 11px; }
.chat-bubble b { font-size: 10px; font-weight: 600; color: #82728e; }
.chat-bubble p { font-size: 12px; line-height: 1.55; margin: 5px 0; }
.chat-bubble small { display: block; text-align: right; color: #aaa0b2; font-size: 9px; }
.sale-context { border-top: 1px solid var(--line); padding: 12px 16px; }
.sale-context .eyebrow { font-size: 10px; }
.sale-context > div { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; }
.sale-context strong { white-space: nowrap; }
.sale-context p { font-size: 10px; line-height: 1.5; color: var(--muted); margin: 7px 0 0; }
#order-receipt { display: block; width: 100%; margin-top: 8px; background: #e8f8f1; color: #20755f; border-radius: 6px; padding: 10px; font-size: 11px; text-align: left; }
#order-receipt:hover { background: #dbf2e6; }
.reading-note { padding: 0 16px 10px; font-size: 9px; color: #92889e; }
.floating-journey { position: absolute; z-index: 4; left: var(--gutter); right: calc(var(--panel-width) + 2 * var(--gutter)); bottom: 24px; max-width: 920px; padding: 14px 18px 10px; background: var(--glass); backdrop-filter: blur(12px); border: 1px solid white; border-radius: 12px; box-shadow: var(--shadow); }
.journey-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 5px 10px; }
.journey-heading .eyebrow { margin: 0; font-size: 10px; }
.journey-heading b { font-size: 12px; font-weight: 650; }
.journey-heading small { margin-left: auto; color: #9b95a7; font-size: 9px; }
#journey-steps { display: flex; overflow-x: auto; scrollbar-width: thin; gap: 0; padding: 8px 0 7px; margin-top: 14px; }
#journey-steps button { position: relative; flex: 1; min-width: 79px; font-size: 10px; line-height: 1.4; padding: 15px 5px 0; color: #9690a1; border-top: 2px solid #e5e2ed; }
#journey-steps button:before { content: ''; position: absolute; top: -5px; left: calc(50% - 4px); width: 8px; height: 8px; background: #d8d3e4; border: 2px solid white; border-radius: 50%; }
#journey-steps button.done { color: #82778f; border-color: #c1b3f3; }
#journey-steps button.done:before { background: #b6a0f3; }
#journey-steps button.current { color: #6d4eff; border-color: #6d4eff; font-weight: 650; }
#journey-steps button.current:before { background: #6d4eff; width: 11px; height: 11px; top: -7px; }
.app:has(.floating-journey:not([hidden])) .scene-hint { display: none; }
.app.panel-collapsed .inbox { display: none; }
.app.panel-collapsed .floating-journey { right: calc(var(--panel-width) + 2 * var(--gutter)); }
.controls { position: absolute; z-index: 7; bottom: 24px; right: var(--gutter); width: var(--panel-width); min-height: 84px; display: flex; flex-direction: column; align-items: stretch; gap: 11px; padding: 10px; border: 1px solid white; border-radius: 10px; background: var(--glass); box-shadow: var(--shadow); }
.controls > div { display: flex; align-items: center; gap: 9px; }
.controls .playback-actions { gap: 6px; }
.controls #advance { padding: 8px 6px; font-size: 10px; white-space: nowrap; }
.primary { background: var(--purple); color: white; padding: 8px 10px; min-width: 76px; border-radius: 7px; font-size: 11px; }
.primary:hover { background: #6042ed; }
#playback-state { font-size: 10px; color: var(--muted); max-width: 68px; overflow-wrap: anywhere; }
#sim-clock { flex-shrink: 0; min-width: 42px; font-size: 11px; font-variant-numeric: tabular-nums; color: #625a7f; text-align: right; }
#time-slider { min-width: 0; width: 100%; margin: 0; accent-color: var(--purple); cursor: pointer; }
.speed-control { margin-left: auto; }
.controls label { font-size: 0; }
.controls select { font-size: 10px; border: 1px solid var(--line); padding: 5px; border-radius: 5px; background: white; color: inherit; }
.empty { padding: 15px; color: var(--muted); font-size: 12px; line-height: 1.6; }
#tour-note { position: absolute; left: var(--gutter); right: calc(var(--panel-width) + 2 * var(--gutter)); bottom: 145px; z-index: 6; max-width: 500px; padding: 14px 17px; border: 1px solid #ded5f4; border-radius: 10px; background: #fffffff5; box-shadow: var(--shadow); color: #50446c; font-size: 13px; line-height: 1.5; }
#loading { position: absolute; inset: 0; display: grid; place-items: center; background: #eef1f4; z-index: 3; font-size: 14px; }
#loading.unavailable { inset: auto; top: 52%; left: var(--gutter); right: calc(var(--panel-width) + 2 * var(--gutter)); padding: 18px; border: 1px solid #dce1e9; border-radius: 10px; background: #fffffff0; color: var(--muted); text-align: center; font-size: 13px; line-height: 1.5; pointer-events: none; }
@media (max-width: 1050px) and (min-width: 621px) {
  :root { --panel-width: 310px; --gutter: 16px; }
  .toolbar h1 { font-size: 17px; }
  .totals { grid-template-columns: repeat(2,minmax(0,1fr)); max-width: 300px; padding: 5px 0; }
  .totals > button { padding: 9px 13px; }
  .totals > button:nth-child(2) { border-right: 0; }
  .totals b { font-size: 20px; margin-top: 3px; }
  #metric-negotiating { font-size: 17px; margin-top: 5px; }
  .totals small { font-size: 10px; }
  .demo-badge { display: none; }
  #toggle-panel { margin-left: auto; }
  .floating-journey { padding: 12px; }
  .journey-heading small { margin-left: 0; }
}
@media (max-width: 620px) {
  :root { --gutter: 12px; }
  .topbar { height: 60px; gap: 7px; }
  .brand { font-size: 17px; gap: 5px; }
  .brand img { width: 29px; height: 29px; }
  .brand small, .demo-badge { display: none; }
  .topbar .subtle { font-size: 9px; padding: 8px 6px; }
  #toggle-panel { margin-left: auto; }
  .app { height: auto; min-height: calc(100dvh - 60px); overflow: visible; }
  .toolbar { top: 18px; right: var(--gutter); }
  h1 { font-size: 18px; }
  .eyebrow { font-size: 10px; }
  .totals { margin-top: 13px; padding: 10px 0; }
  .totals > button { padding: 3px 7px; }
  .totals small { font-size: 10px; }
  .totals b { font-size: 19px; }
  #metric-negotiating { font-size: 12px; margin-top: 13px; }
  .demo-options { margin-top: 10px; gap: 8px; }
  .niche-control { font-size: 11px; }
  .demo-options select { min-height: 40px; }
  .demo-settings summary { min-height: 40px; display: flex; align-items: center; }
  .settings-fields { left: auto; right: 0; }
  .workspace { position: relative; display: flex; flex-direction: column; padding-top: 530px; }
  .stage { height: 530px; bottom: auto; }
  #world { inset: 183px 0 0; }
  .scene-top { top: 222px; left: var(--gutter); right: var(--gutter); width: auto; }
  .scene-top > span { font-size: 10px; }
  .scene-hint { display: none; }
  .inbox { position: relative; top: auto; right: auto; width: auto; height: 560px; margin: 10px var(--gutter); order: 3; }
  .floating-journey { position: relative; left: auto; right: auto; bottom: auto; margin: 4px var(--gutter); padding: 12px; order: 2; }
  .journey-heading small { width: 100%; margin-left: 0; }
  .controls { position: relative; bottom: auto; right: auto; width: auto; margin: 10px var(--gutter); order: 1; }
  .app { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
  .controls .speed-control { font-size: 0; }
  .controls .primary, .controls #advance { min-height: 44px; }
  .panel-modes button, .case-tabs button, .team button, .filters button, .back, #locate, .scene-actions button { min-height: 44px; }
  .panel-modes button { flex: 1; }
  .team { gap: 5px; margin-bottom: 8px; padding-bottom: 8px; }
  .team button { padding: 7px 9px; font-size: 11px; }
  .filters { gap: 5px; }
  .filters button { flex: 1; }
  .flow-row { min-height: 70px; }
  .row-top b { font-size: 13px; }
  .flow-text p, .chat-bubble p { font-size: 13px; }
  .search { min-height: 44px; }
  .search input { font-size: 14px; }
  #tour-note { left: var(--gutter); right: var(--gutter); bottom: 15px; font-size: 12px; }
  #loading.unavailable { top: 58%; right: var(--gutter); }
  #playback-state { max-width: none; font-size: 9px; }
  .app.panel-collapsed .floating-journey { right: auto; }
}
@media (max-height: 740px) and (min-width: 621px) {
  .app { min-height: 610px; }
  .panel-heading { padding-top: 12px; padding-bottom: 10px; }
  .team { margin-bottom: 8px; padding-bottom: 8px; }
  .inbox-foot { padding: 8px 16px; }
}

/* Navegação espacial, guia editorial e idioma: mesma operação em cada vista. */
.language-control { display:flex;align-items:center;gap:7px;font-size:11px;color:var(--muted);margin-left:auto; }
.language-control select { min-height:38px;max-width:135px;border:1px solid var(--line);border-radius:8px;background:#fafaff;padding:7px;color:#40395a;font-size:12px; }
.demo-badge { margin-left:auto; }
.demo-badge + .language-control { margin-left:8px; }
.breadcrumbs { position:absolute;left:var(--gutter);top:196px;z-index:4;display:flex;align-items:center;flex-wrap:wrap;gap:7px;max-width:calc(100% - 2 * var(--gutter));font-size:11px;color:#726888; }
.breadcrumbs button { min-height:32px;padding:5px 9px;background:#ffffffed;border:1px solid #e5e0ef;border-radius:7px; }
.breadcrumbs #crumb-office { color:#50369a;font-weight:600;max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.city-mode .breadcrumbs { top:130px; }
.city-mode .toolbar { right:var(--gutter); }
.city-mode .toolbar h1 { max-width:55%; }
.city-directory { position:absolute;left:var(--gutter);right:var(--gutter);bottom:118px;z-index:5;max-width:1060px;margin:auto;border:1px solid #fff;background:#fffffff2;border-radius:13px;padding:12px;box-shadow:var(--shadow); }
.city-directory-heading { display:flex;align-items:baseline;gap:12px;margin-bottom:9px; }
.city-directory-heading b { font-size:12px; }
.city-directory-heading span { font-size:11px;color:var(--muted); }
#city-businesses { display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px; }
#city-businesses button { display:flex;align-items:center;gap:8px;min-height:62px;min-width:0;text-align:left;padding:9px;border:1px solid #e5e5ed;border-radius:8px;background:#fff; }
#city-businesses button.current { border-color:#9078ef;background:#f4f0ff; }
#city-businesses button span { min-width:0;flex:1; }
#city-businesses b { display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px; }
#city-businesses small { display:block;margin-top:4px;font-size:10px;color:var(--muted); }
#city-businesses em { font-style:normal;font-size:10px;color:#7053ae; }
.business-dot { flex-shrink:0;width:8px;height:26px;border-radius:4px;background:#6d4eff; }
.business-dot.delivery { background:#e9af40; }.business-dot.clinic { background:#7197f5; }.business-dot.realestate { background:#53b997; }.business-dot.school { background:#aa90c7; }
.ai-status { position:absolute;bottom:82px;left:var(--gutter);z-index:4;display:flex;align-items:center;gap:9px;max-width:330px;text-align:left;background:#ffffffed;border:1px solid #d8e9e6;border-radius:10px;padding:10px 12px;box-shadow:var(--shadow); }
.ai-status img { width:30px;height:30px;object-fit:contain; }
.ai-status b { display:block;font-size:11px;color:#4a387a; }.ai-status small { display:block;margin-top:4px;font-size:10px;color:var(--muted);line-height:1.4; }
.ai-activity { flex-shrink:0;max-height:225px;overflow:auto;margin:5px 16px 12px;border:1px solid #d9eae6;border-radius:9px;background:#f6fbfa;padding:11px; }
.ai-activity h3 { font-size:12px;margin:0 0 6px; }.ai-activity p { font-size:10px;line-height:1.5;color:var(--muted);margin:0 0 8px; }
#ai-actions button { display:grid;grid-template-columns:38px 1fr;gap:4px 7px;width:100%;text-align:left;border-top:1px solid #deebe8;padding:9px 0; }
#ai-actions button span { font-size:10px;color:#668e86;grid-row:span 2; }#ai-actions button b { font-size:11px;font-weight:600; }#ai-actions button small { font-size:10px;line-height:1.45;color:var(--muted); }
#tour-note.tour-story { font-size:12px;border-radius:13px;padding:15px 17px;bottom:118px; }
.tour-story-heading { display:flex;justify-content:space-between;gap:15px;font-size:10px;color:#837496;margin-bottom:7px; }
#tour-title { display:block;font-size:16px;font-weight:650;line-height:1.35; }#tour-detail { font-size:12px;line-height:1.55;margin:7px 0 13px;color:#665c76; }
.tour-story-progress { height:3px;border-radius:3px;background:#e9e2f6;overflow:hidden; }.tour-story-progress i { display:block;height:100%;width:0;background:#7960da; }
.tour-active .floating-journey { display:none; }.tour-active .scene-hint { display:none; }
.controls select:disabled { opacity:.55; }
/* A vitrine tem uma faixa própria: os cartões não cobrem os edifícios. */
@media(min-width:621px) {
 .city-mode #world { inset:112px calc(var(--panel-width) + 2 * var(--gutter)) 45px 0; }
 .city-directory { left:auto;right:var(--gutter);top:102px;bottom:118px;width:var(--panel-width);margin:0;display:flex;flex-direction:column; }
 .city-directory-heading { display:block;flex-shrink:0; }
 .city-directory-heading span { display:block;line-height:1.4;margin-top:5px; }
 #city-businesses { grid-template-columns:1fr;overflow:auto;min-height:0; }
 #city-businesses button { min-height:55px; }
}
.chat-header,.chat-context,.case-tabs,.sale-context,.reading-note { flex-shrink:0; }
.reading-note { margin:0;padding:7px 16px 10px;line-height:1.4; }
.conversation { min-height:60px; }
@media(min-width:621px) and (max-width:1050px) {
 .breadcrumbs { top:246px; }.city-mode .breadcrumbs { top:126px; }
 #city-businesses em { display:none; }.city-directory-heading span { font-size:10px; }
 .ai-status { max-width:250px; }
}
@media(max-width:620px) {
 .topbar { display:grid;grid-template-columns:1fr auto auto;height:auto;min-height:100px;gap:7px;padding:9px 12px; }
 .topbar .brand { grid-column:1;grid-row:1;font-size:18px; }.topbar .brand img { width:31px;height:31px; }
 .language-control { grid-column:2 / 4;grid-row:1;margin:0;justify-self:end; }.language-control span { display:none; }.language-control select { min-height:40px;max-width:142px; }
 #toggle-panel { grid-column:1 / 3;grid-row:2;justify-self:start;margin:0;min-height:36px; }.topbar #reset { grid-column:3;grid-row:2;min-height:36px; }
 .topbar .subtle { font-size:11px;padding:8px 10px; }
 .workspace { padding-top:760px; }.stage { height:760px; }
 .toolbar { top:17px; }.toolbar h1 { font-size:20px; }.demo-options { margin-top:10px; }
 .totals { margin-top:12px; }.totals b { font-size:21px; }.totals small { font-size:10px; }
 .breadcrumbs { top:198px;gap:5px;font-size:11px; }.breadcrumbs button { min-height:35px; }
 .scene-top { top:245px; }.scene-top .subtle { font-size:11px; }
 #world { inset:294px 0 68px; }
 .city-mode .toolbar h1 { max-width:none;font-size:20px; }
 .city-mode .breadcrumbs { top:126px; }.city-mode .scene-top { top:172px; }
 .city-mode #world { inset:225px 0 165px; }
 .city-directory { bottom:12px;padding:11px; }.city-directory-heading { display:block;margin-bottom:8px; }.city-directory-heading span { display:block;margin-top:4px;font-size:10px; }
 #city-businesses { grid-template-columns:repeat(5,minmax(128px,1fr));overflow-x:auto;overscroll-behavior-x:contain;padding-bottom:4px; }
 #city-businesses button { min-height:66px; }#city-businesses em { display:none; }
 .ai-status { bottom:15px;left:12px;right:12px;max-width:none;min-height:47px; }.ai-status small { font-size:11px; }
 #tour-note.tour-story { bottom:12px;left:12px;right:12px;max-width:none;padding:13px; }
 #tour-title { font-size:15px; }#tour-detail { font-size:12px; }
 .tour-active #world { bottom:155px; }.tour-active.city-mode #world { bottom:145px; }
 .inbox { height:620px; }.ai-activity { max-height:240px; }.ai-activity p,#ai-actions button small { font-size:11px; }
 .controls { margin-top:0; }.controls select { min-height:40px;min-width:55px;font-size:12px; }
 .scene-actions button,.breadcrumbs button { touch-action:manipulation; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; } }