/* Volga-Dnepr Messenger — unified aesthetic
   Pre-liquid-glass iOS 7–16 flat: hairline borders, SF-style type,
   subtle neutrals, VD navy as accent (replaces system blue).
   Full light + dark theming via [data-theme] attribute.
*/

/* ============ THEME TOKENS ============ */
:root[data-theme="light"] {
  --t-bg:            #F2F2F7;      /* iOS grouped bg */
  --t-bg-elev:       #FFFFFF;      /* elevated surface: cards, sidebars */
  --t-bg-sub:        #EFEFF4;      /* inset / sub-surface */
  --t-bg-chrome:     #FFFFFF;      /* top/bottom bars */
  --t-bg-inset:      #E5E5EA;      /* inset fills */
  --t-bg-press:      rgba(0,0,0,.06); /* pressed state */

  --t-fg:            #000000;
  --t-fg-secondary:  #3C3C43;
  --t-fg-tertiary:   rgba(60,60,67,.6);
  --t-fg-quaternary: rgba(60,60,67,.3);

  --t-hairline:      rgba(60,60,67,.18);   /* iOS separator */
  --t-hairline-soft: rgba(60,60,67,.12);

  --t-accent:        #0B3D91;      /* VD navy replaces iOS blue */
  --t-accent-soft:   #E3ECFA;
  --t-accent-on:     #FFFFFF;
  --t-accent-fg:     #0B3D91;

  --t-bubble-them:   #FFFFFF;
  --t-bubble-them-fg:#0B1020;
  --t-bubble-me:     #0B3D91;
  --t-bubble-me-fg:  #FFFFFF;

  --t-danger:        #FF3B30;
  --t-warn:          #FF9500;
  --t-ok:            #34C759;

  --t-shadow: 0 1px 3px rgba(0,0,0,.08), 0 0 0 .5px rgba(0,0,0,.04);
  --t-shadow-lg: 0 8px 30px rgba(0,0,0,.12), 0 0 0 .5px rgba(0,0,0,.06);

  --t-runway-bg: #0B3D91;
  --t-runway-fg: #FFFFFF;
}

:root[data-theme="dark"] {
  --t-bg:            #000000;
  --t-bg-elev:       #1C1C1E;
  --t-bg-sub:        #2C2C2E;
  --t-bg-chrome:     #1C1C1E;
  --t-bg-inset:      #1C1C1E;
  --t-bg-press:      rgba(255,255,255,.08);

  --t-fg:            #FFFFFF;
  --t-fg-secondary:  #EBEBF5;
  --t-fg-tertiary:   rgba(235,235,245,.6);
  --t-fg-quaternary: rgba(235,235,245,.3);

  --t-hairline:      rgba(84,84,88,.65);
  --t-hairline-soft: rgba(84,84,88,.4);

  --t-accent:        #4F83D6;                 /* lighter VD navy */
  --t-accent-soft:   rgba(79,131,214,.18);
  --t-accent-on:     #FFFFFF;
  --t-accent-fg:     #4F83D6;

  --t-bubble-them:   #262629;
  --t-bubble-them-fg:#FFFFFF;
  --t-bubble-me:     #0B3D91;
  --t-bubble-me-fg:  #FFFFFF;

  --t-danger:        #FF453A;
  --t-warn:          #FF9F0A;
  --t-ok:            #30D158;

  --t-shadow: 0 1px 3px rgba(0,0,0,.6), 0 0 0 .5px rgba(255,255,255,.06);
  --t-shadow-lg: 0 8px 30px rgba(0,0,0,.6), 0 0 0 .5px rgba(255,255,255,.08);

  --t-runway-bg: #0B3D91;
  --t-runway-fg: #FFFFFF;
}

/* default */
:root { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

/* ============ RESET / GLOBAL ============ */
* { box-sizing: border-box; }
html, body, #root { height: 100%; margin: 0; }
body {
  background: var(--t-bg);
  color: var(--t-fg);
  font-family: "Helvetica Neue", "HelveticaNeue", Helvetica, Arial, sans-serif;
  font-size: 15px; line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.01em;
  overflow: hidden;
}
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; padding: 0; }
input, textarea { font: inherit; color: inherit; background: none; border: none; outline: none; }

/* ============ HAIRLINE UTILITY ============ */
.hl-t { border-top: .5px solid var(--t-hairline); }
.hl-b { border-bottom: .5px solid var(--t-hairline); }

/* ============ SCROLLBAR (subtle) ============ */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--t-hairline); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--t-fg-tertiary); }
::-webkit-scrollbar-track { background: transparent; }

/* Runway plate — brand lockup band */
.runway {
  background: var(--t-runway-bg); color: var(--t-runway-fg); position: relative;
}
.runway::before, .runway::after {
  content:""; position:absolute; left:0; right:0; height:.5px; background: rgba(255,255,255,.55);
}
.runway::before { top: 3px } .runway::after { bottom: 3px }

.wordmark {
  font-family: "PT Serif", Georgia, serif;
  font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: .7em;
}
.wordmark .med {
  width: 1.8em; height: 1.8em; border-radius: 50%;
  border: 1.5px solid currentColor;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .78em;
}

/* Classification chip */
.clschip {
  display: inline-flex; align-items: center;
  padding: 1px 5px; border-radius: 3px;
  font-size: 9px; font-weight: 700; letter-spacing: .12em;
  color: #fff; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.clschip.pub { background: #2EA05C }
.clschip.int { background: #2E66C2 }
.clschip.con { background: #E88A2C }
.clschip.sec { background: #B3261E }

/* Mono for metadata */
.mono { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-variant-numeric: tabular-nums; }

/* Cargo-routes wallpaper as the chat canvas background.
   Applies to the messages scroll area in Web + iOS chat. The base color
   stays --t-bg so empty states / scroll bounce match the rest of the app;
   the pattern multiplies on top in light mode and screens in dark mode. */
.vd-chat-canvas {
  background-color: var(--t-bg);
  /* layer: ~45% white veil ON TOP of the pattern so bubbles dominate */
  background-image:
    linear-gradient(rgba(255,255,255,.45), rgba(255,255,255,.45)),
    url(../../assets/pattern-cargo-routes.png);
  background-size: auto, 480px auto;
  background-repeat: repeat, repeat;
  background-blend-mode: normal, multiply;
}
:root[data-theme="dark"] .vd-chat-canvas {
  background-color: #0E1117;
  background-blend-mode: normal, screen;
  /* tone the bright paper down so it reads as a navy haze, not a flash */
  background-image:
    linear-gradient(rgba(11,15,22,.82), rgba(11,15,22,.82)),
    url(../../assets/pattern-cargo-routes.png);
}

/* Bubble timestamp pill — subtle backdrop so the meta line stays readable
   on top of the cargo-routes pattern instead of dissolving into it. */
.vd-msg-meta {
  display: inline-block;
  color: var(--t-fg-tertiary);
  background: rgba(255,255,255,.55);
  border: .5px solid rgba(15,20,30,.05);
  padding: 1px 6px;
  border-radius: 999px;
  letter-spacing: .02em;
}
:root[data-theme="dark"] .vd-msg-meta {
  background: rgba(20,22,28,.55);
  border-color: rgba(255,255,255,.06);
}