* { box-sizing: border-box; scrollbar-width: thin; scrollbar-color: #2a3648 transparent; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: #2a3648; border-radius: 6px;
  border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background-color: #3a4a63; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #0b0f14;
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif; color: #e6edf3; }
#cesium { position: absolute; inset: 0; }
.mono { font-variant-numeric: tabular-nums; }
.muted { color: #94a5b5; font-size: 12px; }
a { color: #58a6ff; }

/* ---------- top bar ---------- */
#topbar { position: absolute; top: 0; left: 0; right: 0; height: 44px; z-index: 20;
  display: flex; align-items: center; gap: 10px; padding: 0 12px;
  background: linear-gradient(180deg, rgba(8,12,18,.92), rgba(8,12,18,.75));
  backdrop-filter: blur(6px); border-bottom: 1px solid rgba(255,255,255,.08); }
.brand { font-weight: 700; font-size: 14px; letter-spacing: .3px;
  display: flex; align-items: center; gap: 6px; white-space: nowrap; flex-shrink: 0; }
.brand img { height: 30px; }
.beta { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px;
  background: #1f6feb; color: #fff; padding: 2px 6px; border-radius: 7px;
  vertical-align: middle; margin-left: 2px; }
.session-name { font-size: 14px; color: #9fb3c8; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; max-width: 40vw; }
.spacer { flex: 1; }

/* ---------- buttons ---------- */
.btn { border: 1px solid rgba(255,255,255,.15); background: rgba(30,40,55,.85); color: #e6edf3;
  border-radius: 8px; padding: 6px 12px; font-size: 13px; cursor: pointer; transition: background .15s; }
.btn:hover { background: rgba(55,70,95,.9); }
.btn.primary { background: #1f6feb; border-color: #2a7aff; }
.btn.primary:hover { background: #2a7aff; }
.btn.ghost { background: rgba(20,28,40,.6); }
.btn.danger { color: #ff7b72; }

/* ---------- left panel ---------- */
#panel { position: absolute; top: 52px; left: 8px; width: 300px; max-height: calc(100% - 220px);
  overflow-y: auto; z-index: 15; background: rgba(13,18,26,.92); border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px; padding: 4px 12px 10px; backdrop-filter: blur(8px);
  transition: transform .25s ease, opacity .25s ease; }
#panel.hidden { transform: translateX(-320px); opacity: 0; pointer-events: none; }
#panelToggle { position: absolute; top: 52px; left: 316px; z-index: 16; width: 26px; height: 34px;
  border-radius: 8px; border: 1px solid rgba(255,255,255,.12); background: rgba(13,18,26,.85);
  color: #9fb3c8; cursor: pointer; transition: left .25s ease; }
#panelToggle.collapsed { left: 8px; font-size: 16px; } /* 🏆 must read as "leaderboard" */
.panel-section { padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.07); }
.panel-section:last-child { border-bottom: 0; }
.panel-title { font-size: 12px; text-transform: uppercase; letter-spacing: .8px; color: #7d8896;
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.upload-btn { font-size: 11px; color: #58a6ff; border: 1px dashed #58a6ff66; padding: 2px 8px;
  border-radius: 6px; cursor: pointer; }
.upload-btn:hover { background: #58a6ff22; }
.row { display: flex; align-items: center; gap: 8px; margin: 6px 0; flex-wrap: wrap; }
.chk { display: flex; align-items: center; gap: 6px; font-size: 13px; margin: 4px 0; cursor: pointer;
  white-space: nowrap; }
.slider-row { font-size: 13px; }
.slider-row input[type=range] { flex: 1; }

/* pilots — live leaderboard */
.pilot-search { width: 100%; margin: 2px 0 6px; padding: 6px 9px; box-sizing: border-box;
  background: #141b26; border: 1px solid #2a3648; border-radius: 8px;
  color: #dde6f2; font-size: 12.5px; outline: none; }
.pilot-search::placeholder { color: #94a5b5; }
.pilot-search:focus { border-color: #2f6bff; }
.pilot-list { display: flex; flex-direction: column; gap: 3px; }
.pilot { display: flex; align-items: center; gap: 7px; padding: 5px 6px; border-radius: 8px;
  cursor: pointer; font-size: 13px; transition: opacity .3s, background .15s; }
.pilot:hover { background: rgba(255,255,255,.06); }
.pilot .rank-badge { width: 21px; height: 21px; flex: none; border-radius: 6px;
  background: #232f42; color: #9fb3c8; font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; }
.pilot .rank-badge.rank-1 { background: #d4af37; color: #1a1400; }
.pilot .rank-badge.rank-2 { background: #b8c0cc; color: #14181d; }
.pilot .rank-badge.rank-3 { background: #b87333; color: #201000; }
.pilot .psel { flex: none; width: 15px; height: 15px; margin: 0; cursor: pointer;
  accent-color: #2f6bff; }
.pilot .dot { width: 12px; height: 12px; border-radius: 50%; flex: none; border: 2px solid #fff3; }
.pilot .dot.off { background: transparent !important; border: 2px dashed #667; }
.pilot .pname { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pilot .ptele { font-size: 10px; color: #7d8896; white-space: nowrap; }
.pilot .plive { font-size: 11px; color: #9fb3c8; white-space: nowrap; min-width: 56px; text-align: right; }
.pilot.followed { background: rgba(31,111,235,.28); outline: 1px solid #1f6feb88; }
.pilot.leader .pname { color: #ffd700; }
.pilot.dimmed { opacity: .35; }
.session-item.dimmed { opacity: .55; }

/* tiny chevrons that hide a panel in place (restore via 📊/🗺 in the transport) */
.edge-hide { position: absolute; top: 2px; right: 5px; z-index: 12;
  width: 20px; height: 16px; padding: 0; line-height: 14px; font-size: 11px;
  color: #94a5b5; background: rgba(20,27,38,.65); border: 1px solid #2a3648;
  border-radius: 5px; cursor: pointer; }
.edge-hide:hover { color: #dde6f2; border-color: #3d4d66; }
.pilot .pbtn { background: none; border: 0; color: #8b98a5; cursor: pointer; font-size: 13px; padding: 2px; }
.pilot .pbtn:hover { color: #ff7b72; }
.pilot .peye:hover { color: #d8dee4; }
.pilot.ghost-row { background: rgba(255,215,0,.06); outline: 1px dashed rgba(255,215,0,.25); }
.hint { font-size: 11px; margin-top: 5px; }
.empty-cta { cursor: pointer; padding: 6px 4px; border-radius: 8px; }
.empty-cta:hover { background: rgba(88,166,255,.12); color: #cfe3ff; }
.title-actions { display: flex; gap: 6px; align-items: center; }
.grow { flex: 1; }

/* floating panels (drawing, media) */
#drawPanel, .float-panel { position: absolute; top: 52px; right: 10px; z-index: 25; width: 210px;
  background: rgba(13,18,26,.94); border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px; padding: 10px 12px; backdrop-filter: blur(8px); }
#drawPanel .dp-title, .float-panel .dp-title { font-size: 13px; font-weight: 600;
  margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
#drawPanel .dp-swatches { display: flex; gap: 6px; margin-bottom: 4px; }
.swatch.sm { width: 24px; height: 24px; }
#drawTools .tool { width: 30px; height: 26px; padding: 0; font-size: 14px; line-height: 24px;
  background: #141b26; border: 1px solid #2a3648; border-radius: 7px; cursor: pointer; }
#drawTools .tool:hover { border-color: #3d4d66; }
#drawTools .tool.on { border-color: #1f6feb; box-shadow: 0 0 0 1px #1f6feb; }
#btnDraw.active, #btnMedia.active { background: #1f6feb; }
#mediaPanel { width: 300px; max-height: 55vh; overflow-y: auto; }
#mediaPanel .pbtn { background: none; border: 0; color: #8b98a5; cursor: pointer; }
#mediaPanel .pbtn:hover { color: #fff; }

/* panel visibility toggles */
.tbtn.off { opacity: .38; }
body.baro-off #baroBox { display: none !important; }
body.baro-off #transport { bottom: 30px; }
body.baro-off #miniMapBox { bottom: 78px; }
body.mini-off #miniMapBox { display: none !important; }

/* cinema mode: hide every panel, keep the scene */
body.cinema #topbar, body.cinema #panel, body.cinema #panelToggle,
body.cinema #baroBox, body.cinema #transport, body.cinema #miniMapBox,
body.cinema #followChip, body.cinema .cesium-viewer-timelineContainer,
body.cinema .cesium-viewer-bottom { display: none !important; }
#cinemaExit { position: absolute; top: 10px; right: 10px; z-index: 40;
  background: rgba(13,18,26,.6); color: #cfe0f0; border: 1px solid rgba(255,255,255,.15);
  border-radius: 10px; padding: 6px 12px; cursor: pointer; font-size: 13px; opacity: .5; }
#cinemaExit:hover { opacity: 1; }

/* wing color swatches */
.swatches { display: flex; gap: 7px; flex-wrap: wrap; }
.swatch { width: 30px; height: 30px; border-radius: 50%; border: 2px solid transparent;
  cursor: pointer; transition: transform .12s; }
.swatch:hover { transform: scale(1.15); }
.swatch.on { border-color: #fff; box-shadow: 0 0 0 2px #1f6feb; }

/* segmented control */
.seg { display: flex; border: 1px solid rgba(255,255,255,.14); border-radius: 9px;
  overflow: hidden; margin: 4px 0 2px; }
.seg button { flex: 1; background: transparent; color: #9fb3c8; border: 0;
  padding: 6px 4px; font-size: 12px; cursor: pointer; transition: background .15s; }
.seg button:hover { background: rgba(255,255,255,.06); }
.seg button.on { background: #1f6feb; color: #fff; }

/* follow chip */
#followChip { position: absolute; top: 52px; left: 50%; transform: translateX(-50%);
  z-index: 16; display: flex; align-items: center; gap: 8px; font-size: 13px;
  background: rgba(31,111,235,.92); border-radius: 18px; padding: 5px 8px 5px 14px;
  box-shadow: 0 4px 16px rgba(0,0,0,.35); }
#followChip button { background: rgba(0,0,0,.25); color: #fff; border: 0; border-radius: 50%;
  width: 22px; height: 22px; cursor: pointer; font-size: 11px; }
#followChip button:hover { background: rgba(0,0,0,.45); }

/* weather */
.weather { display: flex; flex-direction: column; gap: 3px; font-size: 13px; }
.wrow { display: flex; justify-content: space-between; align-items: center; }
.wlabel { color: #8b98a5; font-size: 12px; }
.wval { font-variant-numeric: tabular-nums; display: flex; align-items: center; gap: 5px; }
.warrow { display: inline-block; color: #8fd3ff; font-size: 13px; transition: transform .4s; }

/* topbar clock */
.clock { font-size: 13px; color: #8fd3ff; background: rgba(255,255,255,.05);
  padding: 3px 10px; border-radius: 7px; }

/* task / media lists */
.task-info { font-size: 13px; }
.media-list { display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
.media-item { display: flex; gap: 6px; align-items: center; padding: 3px 4px; border-radius: 6px; }
.media-item:hover { background: rgba(255,255,255,.06); }
.media-item .mtime { color: #8b98a5; cursor: pointer; }
.media-item .mtime:hover { color: #58a6ff; }
.media-item .mname { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }

/* vario legend */
.legend { justify-content: space-between; }
.vario-gradient { flex: 1; height: 10px; border-radius: 5px;
  background: linear-gradient(90deg, #2929c8, #00b7ff, #26c281, #ffe93d, #ff2626); }

/* ---------- transport bar ---------- */
#transport { position: absolute; left: 0; right: 0; bottom: 126px; height: 42px; z-index: 12;
  display: flex; align-items: center; gap: 6px; padding: 0 12px;
  background: rgba(8,12,18,.88); border-top: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(6px); }
.tbtn { background: transparent; border: 0; color: #cfe0f0; font-size: 17px; cursor: pointer;
  width: 38px; height: 36px; border-radius: 8px; display: flex; align-items: center;
  justify-content: center; transition: background .15s;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  touch-action: manipulation; } /* hold-to-scrub must not select text / zoom */
.tbtn:hover { background: rgba(255,255,255,.1); }
.tbtn.tplay { font-size: 21px; width: 46px; background: #1f6feb; }
.tbtn.tplay:hover { background: #2a7aff; }
.tbtn.tseek { font-size: 13px; letter-spacing: -2px; } /* ◄◄/►► read as one glyph */
.tclock { font-size: 14px; color: #8fd3ff; margin-left: 10px; }
.tspeed { display: flex; align-items: center; gap: 5px; font-size: 12px; }
.tspeed .sel { width: 60px; }

#flash { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%);
  z-index: 60; background: rgba(10,15,22,.85); color: #fff; border-radius: 14px;
  padding: 14px 24px; font-size: 22px; pointer-events: none; opacity: 0;
  transition: opacity .18s; }
#flash.show { opacity: 1; }

/* ---------- media overlay ---------- */
#mediaOverlay { position: absolute; right: 10px; top: 96px; z-index: 18; width: 360px; max-width: 42vw;
  background: rgba(10,14,20,.92); border: 1px solid rgba(255,255,255,.15); border-radius: 12px;
  overflow: hidden; box-shadow: 0 8px 30px rgba(0,0,0,.5); }
#mediaOverlay img, #mediaOverlay video { width: 100%; display: block; }
#mediaCaption { padding: 6px 10px; font-size: 12px; color: #9fb3c8; }
#mediaClose { position: absolute; top: 4px; right: 6px; background: rgba(0,0,0,.5); color: #fff;
  border: 0; border-radius: 50%; width: 24px; height: 24px; cursor: pointer; }

/* ---------- mini-map ---------- */
#miniMapBox { position: absolute; right: 8px; bottom: 174px; width: 158px; height: 158px;
  z-index: 11; background: rgba(10,15,22,.72); border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px; overflow: hidden; backdrop-filter: blur(4px); cursor: crosshair; }
#miniMap { width: 100%; height: 100%; display: block; }

/* media list thumbs */
.media-item .mthumb { width: 36px; height: 27px; object-fit: cover; border-radius: 5px; flex: none; }
.media-item .micon { width: 36px; text-align: center; flex: none; }

/* ---------- barogram ---------- */
#baroBox { position: absolute; left: 0; right: 0; bottom: 30px; height: 96px; z-index: 10;
  background: rgba(8,12,18,.82); border-top: 1px solid rgba(255,255,255,.08); }
#baroCanvas { width: 100%; height: 100%; display: block; cursor: crosshair; }

/* Cesium widget tweaks. Google attribution must stay reachable (Map Tiles ToS):
   we hide the Cesium engine logo and keep the compact "Data attribution" link. */
.cesium-viewer-timelineContainer { height: 30px; z-index: 12; }
.cesium-viewer-bottom { bottom: 174px !important; left: auto !important; right: 8px; z-index: 11;
  opacity: .75; }
.cesium-credit-logoContainer { display: none !important; }
.cesium-credit-expand-link { font-size: 11px; color: #8b98a5 !important; }
.cesium-widget-credits { font-size: 11px; }

.num { width: 54px; background: #0b111a; color: #e6edf3; border: 1px solid rgba(255,255,255,.18);
  border-radius: 6px; padding: 3px 6px; font-size: 12px; }
.sel { background: #0b111a; color: #e6edf3; border: 1px solid rgba(255,255,255,.18);
  border-radius: 6px; padding: 2px 4px; font-size: 12px; margin-left: 6px; }

/* ---------- modals ---------- */
.modal { position: absolute; inset: 0; z-index: 50; background: rgba(0,0,0,.55);
  display: flex; align-items: center; justify-content: center; }
.modal-card { width: 460px; max-width: 92vw; max-height: 80vh; overflow-y: auto;
  background: #101722; border: 1px solid rgba(255,255,255,.14); border-radius: 14px; padding: 18px; }
.modal-card h3 { margin: 0 0 10px; }
.modal-card input[type=text], .modal-card input[type=password],
.modal-card input[type=datetime-local], .modal-card select {
  background: #0b111a; color: #e6edf3; border: 1px solid rgba(255,255,255,.18);
  border-radius: 8px; padding: 7px 10px; font-size: 13px; flex: 1; }
.dropzone { border: 2px dashed rgba(88,166,255,.4); border-radius: 10px; padding: 14px 10px;
  text-align: center; font-size: 13px; color: #9fb3c8; margin: 10px 0 6px; }
.step-title { font-size: 12px; text-transform: uppercase; letter-spacing: .6px;
  color: #58a6ff; margin: 12px 0 6px; font-weight: 600; }
.subcard { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.09);
  border-radius: 10px; padding: 8px 10px; }
.subcard .session-list { margin: 0; max-height: 34vh; overflow-y: auto; }
.or-divider { display: flex; align-items: center; gap: 10px; margin: 10px 0;
  color: #7d8896; font-size: 12px; }
.or-divider::before, .or-divider::after { content: ''; flex: 1; height: 1px;
  background: rgba(255,255,255,.1); }

.session-list { margin: 12px 0; display: flex; flex-direction: column; gap: 4px; }
.session-item { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 8px;
  cursor: pointer; font-size: 14px; }
.session-item:hover { background: rgba(255,255,255,.07); }
.session-item .sinfo { color: #8b98a5; font-size: 12px; }
.session-item .sname { flex: 1; }

/* ---------- toast & drop hint ---------- */
#toast { position: absolute; bottom: 170px; left: 50%; transform: translateX(-50%); z-index: 60;
  background: rgba(20,28,40,.95); border: 1px solid rgba(255,255,255,.2); border-radius: 10px;
  padding: 10px 16px; font-size: 13px; display: none; max-width: 70vw; }
#dropHint { position: absolute; inset: 0; z-index: 40; display: none; align-items: center;
  justify-content: center; font-size: 26px; color: #cfe3ff; background: rgba(20,50,110,.35);
  border: 3px dashed #58a6ff; pointer-events: none; }

/* ---------- mobile ---------- */
@media (max-width: 720px) {
  /* the stock 30px timeline is too thin a touch target to scrub with a finger */
  .cesium-viewer-timelineContainer { height: 44px; }
  #topbar { height: 40px; gap: 6px; padding: 0 8px; }
  .brand { font-size: 12px; gap: 4px; }
  .brand img { height: 26px; }
  .beta { display: none; } /* nowrap brand must fit next to 6 buttons on 360px */
  #btnFtv { display: none !important; } /* inline display on the link; FTV lives in the events modal — 7 buttons don't fit */
  .session-name { font-size: 12px; max-width: 28vw; }
  .btn { padding: 6px 8px; font-size: 12px; }
  #topbar .bl { display: none; }

  #panel { top: 48px; left: 6px; width: 78vw; max-width: 300px; max-height: calc(100% - 260px); }
  #panelToggle { top: 48px; left: auto; right: 8px; width: 34px; height: 40px; }
  #panelToggle.collapsed { left: auto; right: 8px; }

  #baroBox { height: 66px; bottom: 30px; }
  #transport { bottom: 96px; height: 46px; gap: 3px; padding: 0 6px; }
  .tbtn { width: 44px; height: 44px; }
  .tclock { font-size: 12px; margin-left: 4px; }
  .tspeed { font-size: 11px; }

  #mediaOverlay { width: 62vw; max-width: 62vw; top: 96px; }
  .cesium-viewer-bottom { bottom: 146px !important; }
  #miniMapBox { width: 110px; height: 110px; bottom: 146px; }
  .pilot { padding: 7px 6px; }
  .pilot .pbtn { padding: 8px 6px; }
  .chk { min-height: 28px; }

  /* pilot stats live at the bottom, right above the transport bar */
  #followChip { top: auto; bottom: 148px; left: 8px; right: 8px;
    transform: none; justify-content: center; font-size: 13px; }
  body.baro-off #followChip { bottom: 82px; }
}

/* Floating play/pause over the scene — CINEMA MODE ONLY (the transport bar is
   hidden there and phones have no Space key, so this is the one control left).
   In the normal layout it duplicated the transport play button right above it
   (user complaint) — hidden. Bottom-left corner: drags rarely start in a
   corner, and the 48px hit area only eats its own pixels. */
#scenePlay { position: absolute; left: 10px; bottom: 12px; z-index: 18; display: none;
  width: 48px; height: 48px; border-radius: 50%; border: 0; cursor: pointer;
  align-items: center; justify-content: center; font-size: 20px; color: #fff;
  background: rgba(31,111,235,.35); opacity: .45; transition: background .2s, opacity .2s; }
#scenePlay.paused { background: #1f6feb; opacity: 1; }
body.cinema #scenePlay { display: flex; }

/* Landscape phones / tablets / narrow desktop windows: the centred top chip
   collides with the panel-collapse button (left:316, same top row) when the
   panel is open and the pilot name is long — drop the chip to the bottom,
   same pattern the phone layout uses (desktop transport: bottom 126 + 42). */
@media (min-width: 721px) and (max-width: 1200px) {
  #followChip { top: auto; bottom: 176px; left: 50%; transform: translateX(-50%);
    max-width: calc(100vw - 16px); }
  body.baro-off #followChip { bottom: 80px; }
}

/* ---------- AI-коуч: чат-панель ---------- */
#coachPanel { position: absolute; top: 52px; right: 8px; bottom: 92px; width: 400px;
  max-width: calc(100vw - 16px); z-index: 25; display: flex; flex-direction: column;
  background: linear-gradient(180deg, rgba(10,14,22,.96), rgba(8,12,18,.93));
  border: 1px solid rgba(255,255,255,.10); border-radius: 12px;
  backdrop-filter: blur(8px); box-shadow: 0 8px 32px rgba(0,0,0,.5); }
#coachPanel .cp-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,.08); font-weight: 700; font-size: 14px; }
#coachPanel .cp-sub { font-weight: 400; font-size: 11px; opacity: .55; flex: 1; }
#coachMsgs { flex: 1; overflow-y: auto; padding: 10px 12px; font-size: 13px; line-height: 1.45; }
#coachMsgs .cm { margin-bottom: 10px; border-radius: 10px; padding: 8px 10px; }
#coachMsgs .cm.q { background: rgba(31,111,235,.18); border: 1px solid rgba(42,122,255,.25);
  margin-left: 24px; white-space: pre-wrap; }
#coachMsgs .cm.a { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08);
  margin-right: 12px; }
#coachMsgs .cm.wait { opacity: .7; font-style: italic; }
#coachMsgs .cm.err { background: rgba(220,60,60,.12); border-color: rgba(220,60,60,.3); }
#coachMsgs .cm.a table { border-collapse: collapse; margin: 6px 0; font-size: 12px; }
#coachMsgs .cm.a th, #coachMsgs .cm.a td { border: 1px solid rgba(255,255,255,.15);
  padding: 3px 7px; text-align: left; }
#coachMsgs .cm.a th { background: rgba(255,255,255,.06); }
#coachMsgs .cm.a code { background: rgba(255,255,255,.09); border-radius: 4px; padding: 0 4px; }
#coachMsgs .cm.a ul { margin: 4px 0 4px 18px; padding: 0; }
#coachMsgs .cm.a h1, #coachMsgs .cm.a h2, #coachMsgs .cm.a h3 { font-size: 13.5px; margin: 8px 0 4px; }
#coachPanel .cp-input { display: flex; gap: 6px; padding: 10px 12px;
  border-top: 1px solid rgba(255,255,255,.08); }
#coachPanel .cp-input textarea { flex: 1; resize: none; background: rgba(255,255,255,.06);
  color: inherit; border: 1px solid rgba(255,255,255,.12); border-radius: 8px;
  padding: 7px 9px; font: inherit; font-size: 13px; }
#coachPanel .cp-input button { align-self: flex-end; }
@media (max-width: 640px) {
  #coachPanel { top: 48px; right: 4px; left: 4px; width: auto; bottom: 150px; }
}

/* коуч: админ-бокс управления доступом */
#coachAccessBox { padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03); }
#coachAccessBox textarea { width: 100%; box-sizing: border-box; resize: vertical;
  background: rgba(255,255,255,.06); color: inherit; border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px; padding: 7px 9px; font: inherit; font-size: 13px; }
#coachPanel .cp-head #coachAccess { margin-left: auto; }