/* GaiaBlu VTS workspace. The chart is the canvas; every workspace panel is optional. */

html, body { width: 100%; height: 100%; }
body { display: block; overflow: hidden; }
#map { position: fixed; inset: 0; width: 100%; height: 100%; background: #081b2b; }

/* Compact operational ribbon. */
#topbar {
  position: fixed;
  inset: 14px 14px auto;
  width: auto;
  height: 68px;
  min-height: 68px;
  padding: 0 16px;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 18px;
  background: linear-gradient(110deg, rgba(5, 19, 33, .97), rgba(11, 32, 48, .94));
  border: 1px solid rgba(106, 217, 211, .26);
  border-radius: 12px;
  box-shadow: 0 16px 42px rgba(0, 11, 22, .4), inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter: blur(18px);
  z-index: 300;
}
#topbar .tb-left { flex: 0 0 auto; gap: 12px; min-width: 0; }
.vts-brand-mark {
  position: relative;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(113, 225, 223, .55);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(113,225,223,.18) 0 2px, transparent 3px),
    repeating-radial-gradient(circle, transparent 0 8px, rgba(113,225,223,.18) 9px 10px);
  box-shadow: 0 0 18px rgba(113, 225, 223, .15);
  overflow: hidden;
}
.vts-brand-mark::after {
  content: '';
  position: absolute;
  inset: 50% 0 0 50%;
  background: linear-gradient(40deg, rgba(113,225,223,.32), transparent 65%);
  transform-origin: top left;
  animation: radar-sweep 7s linear infinite;
}
.vts-brand-mark span { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); z-index: 1; }
@keyframes radar-sweep { to { transform: rotate(360deg); } }
.vts-brand-copy { display: flex; flex-direction: column; gap: 2px; white-space: nowrap; }
#topbar .logo-text { font-size: 14px; line-height: 1; letter-spacing: 1.3px; color: var(--text); }
#topbar .logo-text b { color: var(--accent); }
#topbar .logo-sub { font-size: 8px; font-weight: 700; letter-spacing: 1.8px; color: var(--text-dim); padding: 0; }
.vts-area {
  margin-left: 8px;
  padding: 7px 9px;
  border-left: 1px solid var(--border);
  color: var(--text-dim);
  font: 700 9px var(--mono);
  letter-spacing: 1px;
  white-space: nowrap;
}
#topbar .tb-center { flex: 0 0 auto; margin-right: auto; }
#topbar .mode-badge {
  display: inline-flex;
  align-items: center;
  padding: 8px 10px;
  color: var(--green);
  background: rgba(112,230,176,.08);
  border: 1px solid rgba(112,230,176,.2);
  border-radius: 6px;
  font: 700 10px var(--mono);
  letter-spacing: .8px;
  white-space: nowrap;
}
#topbar .tb-right { display: flex; flex: 0 1 auto; align-items: center; justify-content: flex-end; gap: 16px; min-width: 0; }
.vts-traffic-status {
  display: grid;
  grid-template-columns: 8px auto auto;
  column-gap: 7px;
  align-items: center;
  color: var(--text-dim);
  white-space: nowrap;
}
.vts-traffic-status .vts-live-dot { width: 7px; height: 7px; border-radius: 50%; background: #e9bb69; box-shadow: 0 0 9px currentColor; }
.vts-traffic-status[data-state="online"] .vts-live-dot { background: var(--green); }
.vts-traffic-status[data-state="error"] .vts-live-dot { background: var(--red); }
.vts-traffic-status[data-state="off"] .vts-live-dot { background: var(--text-dim); }
#vts-ais-state { font: 700 9px var(--mono); letter-spacing: .7px; }
#vts-traffic-count { color: var(--text); font: 700 18px var(--mono); }
.vts-traffic-status small { grid-column: 2 / 4; color: var(--text-dim); font-size: 9px; }
.vts-connection { font-size: 10px; color: var(--text-dim); white-space: nowrap; }
.vts-connection.is-connected { color: var(--green); }
.vts-connection.is-error { color: var(--red); }
#topbar .utc-block { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
#topbar .utc-label { font-size: 8px; }
#topbar .utc-time { color: var(--text); font-size: 10px; white-space: nowrap; }
#topbar .kc-user-block { margin: 0; padding-left: 12px; min-width: 0; }
#topbar .kc-username { max-width: 88px; font-size: 10px; }

/* Floating tool rail. It is never part of the document flow. */
.vts-toolbar {
  position: fixed;
  top: 96px;
  left: 14px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  z-index: 310;
}
.vts-tool {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 72px;
  height: 62px;
  padding: 5px;
  border: 1px solid rgba(111, 183, 196, .24);
  border-radius: 10px;
  background: rgba(7, 22, 37, .95);
  color: var(--text-dim);
  box-shadow: 0 8px 24px rgba(0, 12, 24, .28);
  backdrop-filter: blur(18px);
  font: 600 9px var(--font);
  cursor: pointer;
}
.vhf-tool-icon { display: block; width: 25px; height: 25px; }
.vts-tool-icon { color: var(--accent); font: 400 25px var(--font); line-height: 1; }
.vts-tool:hover, .vts-tool[aria-expanded="true"] { border-color: var(--accent); background: #123447; color: var(--text); transform: translateX(2px); }
.vts-tool.has-alarms { border-color: rgba(255, 109, 119, .65); }
.vts-tool.has-alarms .vts-tool-icon { color: var(--red); }
.vts-alarm-count { position: absolute; top: 3px; right: 3px; min-width: 18px; padding: 2px 4px; border-radius: 9px; background: var(--red); color: #06141e; font: 800 10px var(--mono); }
.vts-alarm-count[hidden] { display: none; }
.vts-tool:focus-visible, .vts-panel-close:focus-visible, .traffic-item:focus-visible, .traffic-filters button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Each workspace panel has independent visibility. */
#traffic-panel:not(.is-open), #zones-panel:not(.is-open), #weather-panel:not(.is-open), #port-profile-panel:not(.is-open), #data-sources-panel:not(.is-open), #map-layers-panel:not(.is-open), #control-panel:not(.is-open), #ship-info:not(.is-open), #legends-panel:not(.is-open) { display: none; }
#traffic-panel, #zones-panel, #weather-panel, #port-profile-panel, #data-sources-panel, #map-layers-panel, #control-panel, #ship-info, #legends-panel, #alarms-panel, #ecdis-panel {
  background: rgba(6, 23, 38, .96);
  border: 1px solid rgba(113,225,223,.25);
  border-radius: 12px;
  box-shadow: 0 20px 50px rgba(0, 10, 20, .52), inset 0 1px 0 rgba(255,255,255,.04);
  backdrop-filter: blur(24px);
}
#traffic-panel, #zones-panel, #weather-panel, #port-profile-panel, #data-sources-panel, #map-layers-panel, #control-panel {
  position: fixed;
  top: 96px;
  left: 94px;
  width: min(360px, calc(100vw - 108px));
  max-height: calc(100dvh - 110px);
  z-index: 250;
}
#traffic-panel { display: flex; flex-direction: column; overflow: hidden; }
#zones-panel { display: flex; flex-direction: column; gap: 13px; padding: 16px; overflow-y: auto; }
#weather-panel { display: flex; flex-direction: column; gap: 12px; padding: 16px; overflow-y: auto; }
#control-panel { width: min(340px, calc(100vw - 108px)); padding: 14px; gap: 14px; overflow-y: auto; }
#ship-info, #legends-panel, #alarms-panel, #ecdis-panel { top: 96px; right: 14px; z-index: 250; }
#ship-info { position: fixed; bottom: auto; width: min(330px, calc(100vw - 108px)); }
#legends-panel { position: fixed; width: min(300px, calc(100vw - 108px)); max-height: calc(100dvh - 110px); overflow-y: auto; padding: 14px; }
#alarms-panel { position: fixed; width: min(400px, calc(100vw - 108px)); max-height: calc(100dvh - 110px); z-index: 260; }
#ecdis-panel { position: fixed; width: min(400px, calc(100vw - 108px)); max-height: calc(100dvh - 110px); }
.vts-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--border); color: var(--text); font-size: 13px; }
.vts-panel-heading > div { display: flex; flex-direction: column; gap: 3px; }
.vts-panel-heading small { color: var(--accent); font: 700 9px var(--mono); letter-spacing: 1.2px; }
.vts-panel-close { width: 28px; height: 28px; flex: 0 0 28px; border: 1px solid var(--border); border-radius: 6px; background: transparent; color: var(--text); font-size: 19px; cursor: pointer; }
.vts-panel-close:hover { border-color: var(--accent); color: var(--accent); }
#control-panel .ctrl-btn { border-color: rgba(111,183,196,.18); background: rgba(255,255,255,.025); }
#control-panel .ctrl-btn:hover, #control-panel .ctrl-btn.active { background: rgba(113,225,223,.1); border-color: var(--accent); color: var(--accent); }
#weather-panel .ctrl-btn { border-color: rgba(111,183,196,.18); background: rgba(255,255,255,.025); }
#weather-panel .ctrl-btn:hover, #weather-panel .ctrl-btn.active { background: rgba(113,225,223,.1); border-color: var(--accent); color: var(--accent); }
#control-panel .section-label { color: var(--accent); letter-spacing: 1.6px; }
#ship-info .vts-panel-heading { margin-bottom: 13px; }
#ship-info .si-header { margin-bottom: 12px; }
#legends-panel #ais-legend, #legends-panel #sensor-legend, #legends-panel #track-legend, #legends-panel #partner-logos { position: static; inset: auto; width: 100%; min-width: 0; margin-top: 10px; box-shadow: none; }
#legends-panel #partner-logos { display: flex; flex-flow: row wrap; justify-content: space-around; align-items: center; gap: 8px; padding-top: 10px; border-top: 1px solid var(--border); }
#legends-panel .partner-logo { max-width: 60px; height: 30px; object-fit: contain; }
#ship-popup, #ais-popup, #sensor-popup { max-width: calc(100vw - 28px); }
#ship-popup, #ais-popup, #sensor-popup { max-height: calc(100dvh - 110px); overflow-y: auto; }
.cam-window { max-width: calc(100vw - 28px); max-height: calc(100dvh - 110px); }
#alarms-panel { overflow-y: auto; }
.weather-intro { margin: 0; color: var(--text-dim); font-size: 11px; line-height: 1.5; }
#weather-panel .btn-group { gap: 7px; }
#weather-panel .ctrl-btn { width: 100%; }
#alarms-panel .alarms-header { position: sticky; top: 0; z-index: 2; background: linear-gradient(110deg, #142c3c, #132332); }
#alarms-panel .alarms-title { color: var(--text); }
.alarms-tabs { position: sticky; top: 61px; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding: 8px 12px; border-bottom: 1px solid var(--border); background: #0b2233; }
.alarms-tabs button { padding: 8px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--text-dim); font: 700 11px var(--font); cursor: pointer; }
.alarms-tabs button.is-active { border-color: rgba(113,225,223,.45); background: rgba(113,225,223,.13); color: var(--accent); }
.alarms-tabs button:focus-visible, #weather-panel .ctrl-btn:focus-visible, #alarms-panel button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#alarms-panel .alarms-view[hidden] { display: none; }
#alarms-panel .alarms-list { max-height: none; }
.alarms-view-settings { padding: 14px 16px 18px; }
.alarms-section-title { margin: 4px 0 8px; color: var(--accent); font: 700 10px var(--mono); letter-spacing: 1px; text-transform: uppercase; }
.alarms-view-settings .alarms-settings { margin: 0 0 16px; }
.alarms-view-settings .alarms-voice-config { margin: 0; padding: 12px; border: 1px solid var(--border); border-radius: 8px; }
.alarms-view-settings .voice-config-row { flex-wrap: wrap; }
.alarms-view-settings .voice-config-hint { margin-left: 24px; }
.alarms-view-settings .voice-selector { min-width: 0; }

/* Traffic list: operator sees count, movement, search and target identity immediately. */
#traffic-panel .vts-panel-heading { margin: 16px 16px 0; }
.traffic-overview { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 16px; }
.traffic-overview > span { display: flex; flex-direction: column; gap: 5px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: rgba(113,225,223,.05); color: var(--text-dim); font-size: 10px; }
.traffic-overview strong { color: var(--text); font: 700 23px var(--mono); }
.traffic-search-label { display: block; margin: 0 16px 5px; color: var(--text-dim); font: 700 9px var(--mono); letter-spacing: 1px; text-transform: uppercase; }
.traffic-search { width: calc(100% - 32px); margin: 0 16px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 7px; background: rgba(0,0,0,.2); color: var(--text); font: 12px var(--font); outline: none; }
.traffic-search:focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(113,225,223,.13); }
.traffic-search::placeholder { color: #71909d; }
.traffic-filters { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin: 12px 16px; }
.traffic-filters button { padding: 7px 5px; border: 1px solid var(--border); border-radius: 6px; background: rgba(255,255,255,.02); color: var(--text-dim); font: 600 10px var(--font); cursor: pointer; }
.traffic-filters button.is-active { background: rgba(113,225,223,.14); border-color: var(--accent); color: var(--accent); }
.traffic-list { min-height: 96px; max-height: min(53vh, 600px); overflow-y: auto; padding: 2px 10px 12px; }
.traffic-empty { padding: 24px 14px; color: var(--text-dim); font-size: 12px; text-align: center; line-height: 1.5; }
.traffic-item { display: flex; align-items: center; gap: 10px; width: 100%; margin: 4px 0; padding: 10px; border: 1px solid transparent; border-radius: 8px; background: rgba(255,255,255,.035); color: var(--text); font: 12px var(--font); text-align: left; cursor: pointer; }
.traffic-item:hover { border-color: rgba(113,225,223,.38); background: rgba(113,225,223,.1); }
.traffic-item-icon { flex: 0 0 22px; color: var(--target-color); font-size: 16px; text-align: center; }
.traffic-item-details { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.traffic-item-details strong, .traffic-item-details small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.traffic-item-details strong { font-size: 12px; }
.traffic-item-details small { color: var(--text-dim); font: 10px var(--mono); }
.traffic-item-motion { color: var(--accent); white-space: nowrap; font: 700 10px var(--mono); }
.traffic-list-note { padding: 8px; color: var(--text-dim); font-size: 10px; text-align: center; }

/* Guard zones: create, arm and inspect without hiding the chart. */
.zones-intro { margin: 0; color: var(--text-dim); font-size: 11px; line-height: 1.5; }
.zones-summary { display: flex; justify-content: space-between; gap: 8px; padding: 9px 10px; border: 1px solid var(--border); border-radius: 7px; color: var(--text-dim); font: 10px var(--mono); }
.zones-summary strong { color: var(--green); font-size: 14px; }
#zones-feed-state[data-state="error"], #zones-feed-state[data-state="off"], #zones-storage-status { color: var(--red); }
#zones-storage-status { margin: 0; font-size: 10px; line-height: 1.4; }
.zones-primary { width: 100%; padding: 10px 12px; border: 1px solid rgba(113,225,223,.5); border-radius: 7px; background: rgba(113,225,223,.14); color: var(--accent); font: 700 11px var(--font); cursor: pointer; }
.zones-primary:hover { background: rgba(113,225,223,.23); }
.zones-list { display: flex; flex-direction: column; gap: 8px; min-height: 70px; }
.zones-empty { margin: 0; padding: 15px; border: 1px dashed var(--border); border-radius: 7px; color: var(--text-dim); font-size: 11px; line-height: 1.5; }
.guard-zone { padding: 11px; border: 1px solid var(--border); border-left: 3px solid var(--zone-color); border-radius: 7px; background: rgba(255,255,255,.025); }
.guard-zone.is-inactive { opacity: .58; }
.guard-zone-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.guard-zone-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--text); font-size: 12px; font-weight: 700; }
.guard-zone-state { flex: 0 0 auto; color: var(--green); font: 700 9px var(--mono); }
.guard-zone.is-inactive .guard-zone-state { color: var(--text-dim); }
.guard-zone-meta { margin-top: 6px; color: var(--text-dim); font-size: 10px; }
.guard-zone-count { margin-top: 8px; color: var(--accent); font: 700 10px var(--mono); }
.guard-zone-actions { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.guard-zone-actions button, .zone-form-actions button:not(.zones-primary), #zone-draw-cancel { padding: 6px 8px; border: 1px solid var(--border); border-radius: 5px; background: rgba(255,255,255,.035); color: var(--text-dim); font: 10px var(--font); cursor: pointer; }
.guard-zone-actions button:hover, .zone-form-actions button:hover, #zone-draw-cancel:hover { border-color: var(--accent); color: var(--text); }
.guard-zone-actions .zone-remove:hover { border-color: var(--red); color: var(--red); }
#zones-panel.is-configuring .zones-intro, #zones-panel.is-configuring .zones-list, #zones-panel.is-configuring > .zones-primary { display: none; }
#zone-form[hidden], #zone-draw-banner[hidden] { display: none; }
.zone-form { display: flex; flex-direction: column; gap: 12px; padding-top: 3px; }
.zone-form > strong { color: var(--text); font-size: 12px; }
.zone-form label { display: flex; flex-direction: column; gap: 5px; color: var(--text-dim); font-size: 10px; }
.zone-form input[type="text"], .zone-form select { width: 100%; padding: 9px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface-solid); color: var(--text); font: 11px var(--font); }
.zone-form input:focus, .zone-form select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.zone-form .zone-active-label { flex-direction: row; align-items: center; color: var(--text); }
#zone-form-error { margin: 0; color: var(--red); font-size: 10px; }
.zone-form-actions { display: flex; gap: 8px; }
.zone-form-actions .zones-primary { width: auto; flex: 1; }
#zone-draw-banner { position: fixed; top: 96px; left: 94px; z-index: 320; display: flex; align-items: center; gap: 12px; max-width: calc(100vw - 108px); padding: 10px 12px; border: 1px solid var(--accent); border-radius: 8px; background: var(--surface-solid); color: var(--text); box-shadow: 0 12px 36px rgba(0,0,0,.45); font-size: 11px; }

/* Readout stays legible over light and dark map tiles. */
#map-readout { position: fixed; right: 14px; bottom: 16px; display: flex; align-items: center; gap: 8px; max-width: calc(100vw - 28px); padding: 9px 11px; border: 1px solid var(--border); border-radius: 7px; background: rgba(6,23,38,.9); color: var(--text-dim); box-shadow: 0 7px 22px rgba(0,12,24,.3); backdrop-filter: blur(16px); z-index: 100; pointer-events: none; }
#map-readout span { font: 700 9px var(--mono); letter-spacing: .7px; }
#map-readout strong { color: var(--text); font: 600 10px var(--mono); white-space: nowrap; }
#map-readout i { height: 15px; border-left: 1px solid var(--border); }
.ol-zoom { right: auto !important; left: 14px !important; bottom: 17px !important; }
.ol-attribution { right: 14px !important; bottom: 53px !important; max-width: min(540px, calc(100vw - 28px)); }

/* Waiting for ship data should not block AIS surveillance. */
#ship-connecting-overlay { top: auto !important; left: 94px !important; right: auto !important; bottom: 16px !important; width: auto !important; height: auto !important; padding: 9px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface) !important; z-index: 90 !important; }
#ship-connecting-overlay svg, #ship-connecting-overlay p + p { display: none; }
#ship-connecting-overlay p { font-size: 11px !important; }

@media (max-width: 1200px) {
  .vts-area, #topbar .kc-user-block { display: none; }
  #topbar .tb-right { gap: 10px; }
}
@media (min-width: 801px) and (max-height: 670px) {
  .vts-toolbar { gap: 4px; }
  .vts-tool { height: 50px; }
}
@media (max-width: 800px) {
  #topbar { height: 60px; min-height: 60px; gap: 10px; }
  #topbar .vts-connection, #topbar .utc-block { display: none; }
  #topbar .tb-right { margin-left: auto; }
  .vts-toolbar { top: auto; right: 14px; bottom: 14px; left: 14px; flex-direction: row; justify-content: center; }
  .vts-tool { flex: 1; width: auto; max-width: 100px; height: 54px; }
  #traffic-panel, #zones-panel, #weather-panel, #port-profile-panel, #data-sources-panel, #map-layers-panel, #control-panel, #ship-info, #legends-panel, #alarms-panel, #ecdis-panel { top: 86px; right: 14px; left: 14px; bottom: auto; width: auto; max-width: none; max-height: calc(100dvh - 166px); }
  #zone-draw-banner { top: 86px; left: 14px; right: 14px; max-width: none; }
  #map-readout { bottom: 82px; }
  .ol-zoom { bottom: 82px !important; }
  .ol-attribution { bottom: 119px !important; }
  #ship-connecting-overlay { left: 14px !important; bottom: 82px !important; }
  .sp-grid, .ais-popup-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #ship-popup, #ais-popup, #sensor-popup, .cam-window { max-height: calc(100dvh - 166px); }
}
@media (max-width: 520px) {
  #topbar { padding: 0 10px; }
  .vts-brand-mark { width: 30px; height: 30px; flex-basis: 30px; }
  #topbar .logo-text { font-size: 11px; }
  #topbar .logo-sub { font-size: 6px; letter-spacing: 1px; }
  #topbar .tb-center { display: none; }
  #vts-ais-state, .vts-traffic-status small { display: none; }
  .vts-traffic-status { grid-template-columns: 7px auto; }
  #vts-traffic-count { font-size: 15px; }
  .vts-toolbar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
  .vts-tool { width: 100%; max-width: none; height: 44px; padding: 3px; font-size: 8px; }
  .vts-tool-icon { font-size: 21px; }
  #traffic-panel, #zones-panel, #weather-panel, #port-profile-panel, #data-sources-panel, #map-layers-panel, #control-panel, #ship-info, #legends-panel, #alarms-panel, #ecdis-panel { max-height: calc(100dvh - 210px); }
  #map-readout, .ol-zoom { bottom: 118px !important; }
  .ol-attribution { bottom: 153px !important; }
  #ship-connecting-overlay { bottom: 118px !important; }
  #map-readout { gap: 5px; padding: 7px; }
  #map-readout span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .vts-brand-mark::after { animation: none; }
  .vts-tool { transition: none; }
}

/* Shared offsets follow the actual ribbon height, including the partner row. */
:root { --workspace-top: 96px; --workspace-bottom: 14px; }
#topbar #partner-logos { position: absolute; top: 50%; left: 50%; right: auto; transform: translate(-50%, -50%); display: flex; flex-direction: row; align-items: center; gap: 8px; pointer-events: auto; }
#topbar .partner-logo-card { display: grid; place-items: center; width: 66px; height: 46px; padding: 4px; overflow: hidden; background: #17344a; border: 1px solid rgba(113,225,223,.35); border-radius: 6px; }
#topbar .partner-logo-card:not(.partner-logo-dark) .partner-logo { filter: brightness(0) invert(1); }
#topbar .partner-logo { width: 100%; height: 100%; min-height: 0; object-fit: contain; opacity: 1; }
#topbar .partner-logo-cnit .partner-logo { transform: scale(1.45); }
#traffic-panel, #zones-panel, #weather-panel, #port-profile-panel, #data-sources-panel, #map-layers-panel, #control-panel, #ship-info, #legends-panel, #alarms-panel, #ecdis-panel { top: var(--workspace-top); max-height: calc(100dvh - var(--workspace-top) - var(--workspace-bottom)); }
.vts-toolbar { top: var(--workspace-top); }
#zone-draw-banner { top: var(--workspace-top); }
#map-footer { position: fixed; right: 14px; bottom: 14px; z-index: 100; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; max-width: calc(100vw - 28px); }
#map-footer #map-readout { position: static; max-width: 100%; }
#map-attributions { max-width: min(540px, calc(100vw - 28px)); }
#map-attributions .ol-attribution { position: static; right: auto !important; bottom: auto !important; max-width: 100%; padding: 5px 8px; border-radius: 6px !important; text-align: right; }
#map-attributions .ol-attribution ul { white-space: normal; }
.weather-external { display: flex; flex-direction: column; gap: 6px; padding-top: 12px; border-top: 1px solid var(--border); }
.weather-portal { display: block; padding: 11px 12px; border: 1px dashed #aab8ff; border-radius: 8px; background: rgba(151,164,255,.08); color: #c6ceff; font: 600 12px var(--font); text-decoration: none; }
.weather-portal:hover { background: rgba(151,164,255,.17); }
.weather-portal[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.weather-external small, #basemap-status { margin: 0; color: var(--text-dim); font-size: 11px; line-height: 1.5; }
#btn-basemap-satellite:disabled { opacity: .5; cursor: not-allowed; }
#basemap-recover[hidden] { display: none; }
@media (max-width: 1900px) {
  #topbar { display: grid; grid-template-columns: minmax(180px, 1fr) auto auto; height: auto; min-height: 98px; padding-top: 10px; padding-bottom: 10px; gap: 8px 10px; }
  #topbar .tb-center { margin-right: 0; }
  #topbar #partner-logos { position: static; transform: none; grid-column: 1 / -1; grid-row: 2; justify-content: center; }
  #topbar .partner-logo-card { height: 40px; width: 62px; }
}
@media (max-width: 800px) {
  :root { --workspace-bottom: 80px; }
  .vts-toolbar { top: auto; }
  #map-footer { bottom: 82px; }
}
@media (max-width: 520px) {
  :root { --workspace-bottom: 124px; }
  #topbar { grid-template-columns: minmax(0, 1fr) auto; }
  #map-footer { bottom: 118px; }
  #map-footer #map-readout { bottom: auto !important; }
}
/* Keep navigation controls clear of the entire credits/readout block. */
.ol-zoom { bottom: var(--workspace-bottom) !important; }
#ship-connecting-overlay { bottom: var(--workspace-bottom) !important; }

/* Desktop fleet cards and shared floating window controls. */
#ship-info { overflow-y: auto; }
.fleet-vessel + .fleet-vessel { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
.fleet-actions { display: flex; gap: 8px; margin-top: 12px; }
.fleet-actions .ctrl-btn { flex: 1; justify-content: center; }
.fleet-actions .ctrl-btn.active { border-color: var(--accent); color: var(--accent); background: var(--accent-glow); }
.fleet-actions .ctrl-btn:disabled { opacity: .45; cursor: not-allowed; }
.fleet-hint { display: block; margin-top: 8px; color: var(--text-dim); font-size: 11px; line-height: 1.5; }
.fleet-hint[hidden] { display: none; }

/* Dedicated source visibility and nautical chart layers. */
#port-profile-panel, #data-sources-panel, #map-layers-panel { display: flex; flex-direction: column; gap: 14px; padding: 16px; overflow-y: auto; }
#data-sources-panel .ctrl-btn, #map-layers-panel .ctrl-btn { border-color: rgba(111,183,196,.18); background: rgba(255,255,255,.025); }
#data-sources-panel .ctrl-btn:hover, #data-sources-panel .ctrl-btn.active,
#map-layers-panel .ctrl-btn:hover, #map-layers-panel .ctrl-btn.active { background: var(--accent-glow); border-color: var(--accent); color: var(--accent); }
#data-sources-panel .section-label, #map-layers-panel .section-label { color: var(--accent); }
.workspace-intro { color: var(--text-dim); font-size: 12px; line-height: 1.5; }
.fleet-services { margin-top: 12px; }
.fleet-services .ctrl-btn { width: 100%; }
.fleet-services .ctrl-btn.active { border-color: var(--accent); color: var(--accent); background: var(--accent-glow); }

/* Port picker shares the operational rail's glass surface and accent states. */
.port-controls { width: 72px; display: flex; flex-direction: column; gap: 5px; color: var(--text-dim); font: 600 9px var(--font); }
.port-picker { position: relative; border: 1px solid rgba(111,183,196,.24); border-radius: 10px; background: rgba(7,22,37,.95); box-shadow: 0 8px 24px rgba(0,12,24,.28); backdrop-filter: blur(18px); transition: border-color .15s, background .15s; }
.port-picker:hover, .port-picker:focus-within, .port-picker[open] { border-color: var(--accent); background: #123447; }
.port-picker summary { min-height: 60px; display: flex; flex-direction: column; justify-content: center; gap: 5px; list-style: none; cursor: pointer; border-radius: 9px; }
.port-picker summary::-webkit-details-marker { display: none; }
.port-picker-label { display: flex; align-items: center; justify-content: center; gap: 4px; color: var(--accent); font-size: 8px; letter-spacing: .8px; text-transform: uppercase; }
.port-picker-label svg { width: 15px; height: 15px; }
.port-picker-current { display: flex; align-items: center; justify-content: center; gap: 3px; color: var(--text); font-size: 10px; }
#port-current-name { max-width: 51px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.port-picker-current svg { width: 10px; height: 10px; color: var(--accent); }
.port-picker[open] .port-picker-current svg { transform: rotate(180deg); }
.port-picker-menu { position: absolute; top: -1px; left: calc(100% + 10px); width: 190px; display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-solid); box-shadow: 0 12px 32px rgba(0,12,24,.45); }
.port-picker-menu label { color: var(--text-dim); font-size: 10px; letter-spacing: .5px; }
.port-controls select { width: 100%; min-width: 0; padding: 8px; border: 1px solid var(--border); border-radius: 6px; background: rgba(255,255,255,.035); color: var(--text); font: 600 12px var(--font); cursor: pointer; color-scheme: dark; }
.port-controls select option { color: var(--text); background: var(--surface-solid); }
.port-controls button { padding: 9px; border: 1px solid rgba(111,183,196,.24); border-radius: 8px; background: var(--accent-glow); color: var(--accent); font: 600 11px var(--font); cursor: pointer; }
.port-controls button:hover, .port-controls button[aria-expanded="true"] { border-color: var(--accent); background: #123447; color: var(--text); }
.port-picker summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#alarm-port-filter { color: var(--text); background: var(--surface-solid); border: 1px solid var(--border); border-radius: 5px; padding: 4px 8px; font: inherit; }
#port-selection-status:not(:empty) { position: absolute; top: 0; left: calc(100% + 10px); width: 260px; padding: 10px; background: var(--surface-solid); border: 1px solid var(--accent); border-radius: 6px; font-size: 12px; }
#port-profile-content { display: flex; flex-direction: column; gap: 10px; color: var(--text-dim); font-size: 12px; line-height: 1.5; }
#port-profile-content strong { color: var(--text); }
.alarm-port-label { display: flex; align-items: center; gap: 10px; padding: 10px 12px; color: var(--text-dim); font-size: 12px; }

.port-source-list { display: flex; flex-direction: column; gap: 9px; }
.port-source-card { padding: 10px; border: 1px solid var(--border); border-radius: 8px; background: rgba(255,255,255,.025); }
.port-source-card strong { display: block; margin-bottom: 4px; color: var(--text); font-size: 12px; }
.port-source-card small { display: block; color: var(--text-dim); font-size: 11px; }
.port-source-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.port-source-link { display: inline-flex; align-items: center; padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--accent-glow); color: var(--accent); font: inherit; font-size: 11px; text-decoration: none; cursor: pointer; }
.port-source-link:disabled { opacity: .5; cursor: default; }
.port-source-link:focus-visible, .port-controls select:focus-visible, .port-controls button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.port-camera-window { width: 560px; height: 370px; padding: 12px; gap: 12px; }
.port-camera-window iframe { flex: 1; width: 100%; min-height: 0; border: 0; background: #000; }

/* Assistant launcher and conversation: anchored above the chart readout. */
.ai-chat-launcher {
  position: fixed; right: 14px; bottom: var(--workspace-bottom); z-index: 310;
  width: 60px; height: 60px; border-radius: 50%; border: 1px solid var(--accent);
  background: linear-gradient(145deg, #153e50, #071b2e); color: var(--accent);
  box-shadow: 0 8px 30px #0008, 0 0 22px var(--accent-glow);
  display: flex; align-items: center; justify-content: center; gap: 3px;
  font: 700 12px var(--font); cursor: pointer;
}
.ai-chat-launcher svg { width: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.ai-chat-launcher:hover, .ai-chat-launcher[aria-expanded="true"] { background: #205063; color: #fff; }
.ai-chat-launcher:focus-visible { outline: 2px solid white; outline-offset: 4px; }
#ai-chat-panel {
  position: fixed; right: 14px; bottom: calc(var(--workspace-bottom) + 76px);
  width: 560px; height: 740px;
  max-height: calc(100vh - var(--workspace-top) - var(--workspace-bottom) - 76px);
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface-solid); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 18px 60px #0009; color: var(--text); z-index: 220; font-family: var(--font);
}
#ai-chat-panel:not(.is-open) { display: none; }
#ai-chat-panel .vts-panel-heading { flex-shrink: 0; padding: 15px 18px; border-bottom: 1px solid var(--border); }
#ai-chat-title { margin: 0 0 4px; font-size: 22px; }
#ai-chat-messages { flex: 1; min-height: 0; overflow-y: auto; padding: 16px; }
#ai-chat-empty { color: var(--text-dim); font-size: 13px; line-height: 1.6; }
.ai-chat-message { margin-bottom: 12px; padding: 12px; border-radius: 10px; background: #ffffff08; overflow-wrap: anywhere; }
.ai-chat-message-user { margin-left: 25px; background: #71e1df12; border: 1px solid #71e1df30; }
.ai-chat-message-assistant { margin-right: 25px; }
.ai-chat-elapsed { display: block; margin-top: 9px; color: var(--text-dim); font: 13px var(--mono); font-variant-numeric: tabular-nums; }
.ai-chat-message > strong { font-size: 14px; color: var(--accent); }
.ai-chat-message p { margin: 6px 0 0; font-size: 17px; line-height: 1.65; white-space: pre-wrap; }
#ai-chat-form { flex-shrink: 0; padding: 14px 16px; border-top: 1px solid var(--border); }
#ai-chat-form label { display: block; font-size: 14px; margin-bottom: 7px; color: var(--text-dim); }
#ai-chat-input { box-sizing: border-box; width: 100%; resize: none; border-radius: 8px; border: 1px solid var(--border); background: var(--input-bg, #041220); color: var(--text); padding: 10px; font: 16px var(--font); }
#ai-chat-input:focus { outline: 1px solid var(--accent); }
.ai-chat-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
.ai-chat-actions span { font-size: 12px; color: var(--text-dim); }
#ai-chat-send { border: 1px solid var(--accent); border-radius: 7px; padding: 8px 13px; color: var(--accent); background: #71e1df12; cursor: pointer; }
#ai-chat-send:disabled { opacity: .4; cursor: default; }
#ai-chat-status { margin: 9px 0 0; color: var(--text-dim); font-size: 13px; line-height: 1.4; }

/* Point observations and complete structured API values. */
#observation-popup { position: fixed; width: 390px; max-height: calc(100vh - var(--workspace-top) - 30px); overflow: auto; padding: 16px; box-sizing: border-box; background: var(--surface-solid); color: var(--text); border: 1px solid var(--border); border-radius: 12px; font-family: var(--font); }
#observation-popup:not(.is-open) { display: none; }
#observation-popup-content { margin-top: 12px; }
#sensor-popup-readings:has(.observation-meta) { display: block; width: 100%; }
#sensor-popup { max-height: calc(100vh - var(--workspace-top) - 30px); overflow-y: auto; }
.observations-controls { display: flex; align-items: center; gap: 10px; margin: 8px 0 14px; color: var(--text-dim); font-size: 11px; }
.observations-controls span { flex: 1; }
#observations-refresh { padding: 5px 8px; background: transparent; border: 1px solid var(--border); color: var(--accent); border-radius: 6px; cursor: pointer; }

/* Measurement-specific observation cards shared by weather and port sensors. */
#observation-popup { width: 440px; }
.observation-meta { display: flex; flex-direction: column; gap: 5px; margin: 12px 0; font-size: 11px; color: var(--text-dim); overflow-wrap: anywhere; }
.observation-group h3 { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--accent); margin: 16px 0 8px; }
.observation-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.observation-card { padding: 12px; border: 1px solid var(--border); border-radius: 10px; background: #ffffff04; min-width: 0; }
.observation-measurement-label { display: block; font-size: 11px; color: var(--text-dim); min-height: 28px; }
.observation-reading { display: flex; align-items: center; gap: 9px; margin: 8px 0; }
.observation-reading svg { width: 28px; height: 28px; flex: 0 0 28px; fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.observation-reading strong { font: 600 23px var(--mono); overflow-wrap: anywhere; min-width: 0; }
.observation-kind-temperature svg { stroke: #ffc96b; }
.observation-kind-wave svg, .observation-kind-level svg, .observation-kind-water svg { stroke: #7cbcff; }
.observation-measurement-unit, .observation-card small { display: block; color: var(--text-dim); font-size: 10px; line-height: 1.6; }
.observation-unit-note { font-size: 10px; color: var(--text-dim); line-height: 1.5; margin: 12px 0; }

/* Existing external VHF service, loaded only while its window is open. */
#vhf-transcription-panel { position: fixed; width: 760px; height: 540px; max-height: calc(100vh - var(--workspace-top) - var(--workspace-bottom)); display: flex; flex-direction: column; box-sizing: border-box; padding: 16px; gap: 12px; background: var(--surface-solid); border: 1px solid var(--border); border-radius: 12px; color: var(--text); font-family: var(--font); }
#vhf-transcription-panel:not(.is-open) { display: none; }
#vhf-transcription-panel .vts-panel-heading { flex-shrink: 0; }
.vhf-transcription-content { flex: 1; min-height: 0; overflow-y: auto; }
#vhf-transcription-frame { width: 100%; height: 100%; border: 0; border-radius: 8px; background: #fff; }
#vhf-transcription-placeholder { padding: 28px; color: var(--text-dim); font-size: 14px; line-height: 1.6; }
.vhf-service-link { align-self: flex-start; flex-shrink: 0; padding: 7px 12px; border: 1px solid var(--border); border-radius: 7px; color: var(--accent); font-size: 12px; text-decoration: none; }
.vhf-service-link:hover { border-color: var(--accent); background: var(--accent-glow); }

/* Source quality: availability and measurement freshness are separate. */
.source-health-summary { background: var(--panel-bg, #102738); color: var(--text, #dcecf5); border: 1px solid #426172; border-radius: 6px; padding: 7px 10px; cursor: pointer; }
.source-health-summary.has-issues, .source-health-row.has-issues { border-color: #efba69; }
.source-health-row { display: grid; gap: 5px; border: 1px solid var(--muted-border, #355061); border-radius: 6px; padding: 10px; margin: 7px 0; }
.source-health-row span, .source-popup-health { color: var(--text-dim); font-size: 12px; }
.source-health-row small { color: var(--text-dim); line-height: 1.5; overflow-wrap: anywhere; }
.source-popup-health { padding: 8px; border-top: 1px solid var(--muted-border, #355061); }

/* Integrated VTS assistant: readable responses, scoped controls and PDF citations. */
#ai-chat-panel { box-sizing: border-box; overflow-y: auto; }
#ai-chat-panel .vts-panel-heading { position: sticky; top: 0; z-index: 2; background: var(--surface-solid); padding-left: 42px; }
#ai-chat-messages { min-height: 80px; }
.ai-chat-toolbar, #ai-chat-service-status { flex-shrink: 0; }
#ai-chat-resize { position: absolute; left: 6px; top: 6px; width: 28px; height: 28px; padding: 5px; border: 1px solid var(--border); border-radius: 6px; color: var(--text-dim); background: transparent; cursor: nwse-resize; }
#ai-chat-resize svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.5; }
#ai-chat-resize:hover { border-color: var(--accent); color: var(--accent); }
#ai-chat-resize:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ai-chat-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 16px; }
.ai-chat-toolbar label { display: flex; flex-direction: column; gap: 5px; font-size: 14px; color: var(--text-dim); }
.ai-chat-toolbar select, .ai-chat-toolbar button, #ai-chat-stop, .ai-chat-document-tools button { color: var(--text); background: var(--control-bg, #0d293a); border: 1px solid var(--border); border-radius: 6px; padding: 7px; font: 12px var(--font); }
#ai-chat-stop:disabled { opacity: .4; }
#ai-chat-service-status { display: inline-block; margin: 0; padding: 0; color: var(--text-dim); font-size: 13px; }
.ai-chat-documents { margin: 0 16px 8px; border: 1px solid var(--border); border-radius: 8px; padding: 8px; }
.ai-chat-documents summary { cursor: pointer; color: var(--accent); font-size: 14px; }
.ai-chat-document-tools { display: flex; gap: 8px; padding-top: 8px; }
.ai-chat-document-tools input { flex: 1; min-width: 0; background: var(--input-bg, #041220); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 7px; }
#ai-chat-documents-status { color: var(--text-dim); font-size: 11px; }
#ai-chat-documents-list { max-height: 130px; overflow-y: auto; display: grid; gap: 8px; font-size: 12px; }
#ai-chat-documents-list a, .ai-chat-content a { color: var(--accent); text-decoration: underline; }
.ai-chat-content { font-size: 17px; line-height: 1.65; white-space: pre-wrap; margin-top: 6px; }
.ai-chat-content:has(p) { white-space: normal; }
.ai-chat-content p { white-space: normal; margin: 8px 0; }
.ai-chat-content h1, .ai-chat-content h2, .ai-chat-content h3 { font-size: 20px; margin: 12px 0 6px; }
.ai-chat-content pre { white-space: pre; overflow-x: auto; background: var(--input-bg, #041220); padding: 8px; border-radius: 6px; }
.ai-chat-content table { display: block; overflow-x: auto; border-collapse: collapse; }
.ai-chat-content th, .ai-chat-content td { border: 1px solid var(--border); padding: 6px; min-width: 65px; }
.ai-chat-content ul, .ai-chat-content ol { padding-left: 20px; }
.ai-chat-content blockquote { border-left: 2px solid var(--accent); padding-left: 8px; margin-left: 0; color: var(--text-dim); }
.ai-chat-documents { flex-shrink: 0; }
#ai-chat-conversations-search, #ai-chat-conversation-title { min-width: 0; box-sizing: border-box; background: var(--input-bg, #041220); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 6px; font: 12px var(--font); }
#ai-chat-conversations-search { width: 100%; margin: 8px 0; }
#ai-chat-conversations-list { display: grid; align-content: start; gap: 6px; flex: 1; min-height: 80px; overflow-y: auto; }
.ai-chat-conversation { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 7px; text-align: left; color: var(--text); background: var(--control-bg, #0d293a); border: 1px solid var(--border); border-radius: 6px; cursor: pointer; }
.ai-chat-conversation span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
.ai-chat-conversation small { flex-shrink: 0; font-size: 12px; color: var(--text-dim); }
.ai-chat-conversation[aria-pressed="true"] { border-color: var(--accent); background: #71e1df12; }
.ai-chat-history-actions { display: flex; gap: 5px; margin-top: 8px; }
#ai-chat-conversation-title { flex: 1; }
.ai-chat-history-actions button { border: 1px solid var(--border); border-radius: 6px; background: var(--control-bg, #0d293a); color: var(--text); font: 11px var(--font); padding: 6px; cursor: pointer; }
#ai-chat-history-status { margin: 6px 0 0; color: var(--text-dim); font-size: 10px; }
.ai-chat-history-actions button:focus-visible, .ai-chat-conversation:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ai-chat-navigation { display: flex; align-items: center; gap: 10px; padding: 10px 16px; flex-shrink: 0; border-bottom: 1px solid var(--border); }
.ai-chat-navigation strong { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13px; }
.ai-chat-navigation button { display: flex; align-items: center; gap: 5px; flex-shrink: 0; border: 1px solid var(--border); border-radius: 6px; color: var(--text); background: var(--control-bg, #0d293a); padding: 7px; font: 12px var(--font); cursor: pointer; }
.ai-chat-navigation svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.ai-chat-navigation button:hover { border-color: var(--accent); color: var(--accent); }
.ai-chat-navigation button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#ai-chat-current-view, #ai-chat-conversations { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow-y: auto; }
#ai-chat-conversations { padding: 0 16px 14px; }
#ai-chat-conversations h3 { font-size: 18px; margin: 12px 0 4px; }
#ai-chat-panel [hidden] { display: none !important; }

/* ROC Assistant identity and readable desktop chat typography. */
#ai-chat-panel .vts-panel-heading > .ai-chat-identity { display: flex; flex-direction: row; align-items: center; gap: 12px; }
#ai-chat-avatar { position: relative; display: grid; place-items: center; flex: 0 0 42px; width: 42px; height: 42px; background: #71e1df12; border: 1px solid var(--border); border-radius: 50%; color: var(--accent); }
#ai-chat-avatar svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
#ai-chat-avatar::after { content: ''; position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; border-radius: 50%; border: 3px solid var(--surface-solid); background: var(--text-dim); }
#ai-chat-avatar[data-state="online"]::after { background: var(--green); }
#ai-chat-avatar[data-state="checking"]::after { background: #ffc766; }
#ai-chat-avatar[data-state="offline"]::after { background: var(--red); }
#ai-chat-service-status[data-state="online"] { color: var(--green); }
#ai-chat-empty { font-size: 16px; }
.ai-chat-content strong { font-size: inherit; }
.ai-chat-toolbar select, #ai-chat-stop, #ai-chat-send, .ai-chat-document-tools input, .ai-chat-document-tools button, .ai-chat-navigation button, .ai-chat-history-actions button, #ai-chat-conversations-search, #ai-chat-conversation-title { font: 14px var(--font); }
.ai-chat-navigation strong, #ai-chat-documents-list { font-size: 15px; }
#ai-chat-documents-status, #ai-chat-history-status { font-size: 12px; }
.ai-chat-actions { flex-wrap: wrap; }

#vhf-transcription-status { margin: 0; font-size: 13px; color: var(--accent); overflow-wrap: anywhere; }
.vhf-transcription-note { color: var(--text-dim); }
.vhf-transcription-entry { padding: 12px 0; border-bottom: 1px solid var(--border); }
.vhf-transcription-meta { display: flex; flex-wrap: wrap; gap: 8px 14px; font-size: 12px; color: var(--text-dim); }
.vhf-transcription-meta strong { color: var(--accent); }
.vhf-transcription-meta time { margin-left: auto; }
.vhf-transcription-entry p { margin: 8px 0 0; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }

/* Native GaiaBlu camera streams: the video has no embedded application chrome. */
.ship-camera-feed { flex: 1; min-height: 0; position: relative; background: #000; }
.cam-win-body .ship-camera-feed img { display: block; width: 100%; height: 100%; object-fit: contain; }
.ship-camera-status { flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 10px; color: var(--text-dim); background: var(--surface-solid); font-size: 11px; }
.ship-camera-status button { padding: 4px 8px; border: 1px solid var(--border); border-radius: 5px; color: var(--accent); background: var(--control-bg); cursor: pointer; }
.ship-camera-mob { padding: 8px 10px; color: var(--red); background: var(--danger-bg); font-size: 12px; font-weight: 700; flex-shrink: 0; }
.ship-camera-status button[hidden],.ship-camera-mob[hidden] { display: none; }

/* Independent ship model inspection windows; no position or live data required. */
.ship-model-panel { position: fixed; top: var(--workspace-top); left: 94px; width: 640px; height: 500px; max-height: calc(100vh - var(--workspace-top) - var(--workspace-bottom)); display: flex; flex-direction: column; padding: 14px; gap: 10px; overflow: auto; color: var(--text); background: var(--surface-solid); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--panel-shadow); }
.ship-model-panel:not(.is-open) { display: none; }
.ship-model-canvas { flex: 1; min-height: 120px; position: relative; border-radius: 8px; background: var(--input-bg); overflow: hidden; }
.ship-model-canvas canvas { display: block; width: 100%; height: 100%; }
.ship-model-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex-shrink: 0; }
.ship-model-controls span { flex: 1; color: var(--text-dim); font-size: 11px; }
.ship-model-controls button { border: 1px solid var(--border); border-radius: 6px; padding: 6px 9px; background: var(--control-bg); color: var(--text); cursor: pointer; }
.ship-model-controls button:disabled { opacity: .45; cursor: default; }
.ship-model-status { color: var(--text-dim); font-size: 13px; }
.ship-model-status[hidden] { display: none; }

.ship-model-resize { position: absolute; right: 5px; bottom: 5px; width: 24px; height: 24px; padding: 4px; color: var(--text-dim); background: var(--control-bg); border: 1px solid var(--border); border-radius: 5px; cursor: nwse-resize; }
.ship-model-resize svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.5; }
.ship-model-resize:hover { color: var(--accent); border-color: var(--accent); }
.ship-model-resize:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ship-model-controls { padding-right: 22px; }