/* Vzhled mobilního klienta (index.html) — chat, boční panel, prohlížení konverzace, paměť, přihlášení.
   Načítá se za app.css a smí jeho pravidla přebít. Tokeny jsou v app.css.
   Předloha: docs/assistant/mockup-pwa.html */

/* ---- kostra: výška je pevně viewport, scrolluje jen proud zpráv ----
   --vh nastavuje app.js z visualViewport (klávesnice na iOS); 100dvh je záložka. */
html, body { height: 100%; overflow: hidden; overscroll-behavior: none; }
#app { height: 100dvh; height: var(--vh, 100dvh); min-height: 0; }
#shell { flex: 1; min-height: 0; position: relative; }

/* ---- horní lišta ---- */
.bar { flex: 0 0 auto; display: flex; align-items: center; gap: var(--s1);
  min-height: var(--bar); padding: max(6px, env(safe-area-inset-top)) var(--s2) 6px;
  background: var(--surface); border-bottom: 1px solid var(--rule); }
.bar-title { flex: 1; min-width: 0; text-align: center; font-family: var(--hy); font-size: 16px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-title small { display: block; font-family: var(--ui); font-size: 11.5px; font-weight: 400; color: var(--ink-faint);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.icon { width: var(--tap); height: var(--tap); flex: 0 0 auto; display: grid; place-items: center; border: 0; border-radius: var(--r-pill);
  background: none; color: var(--ink-soft); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.icon:active { background: var(--accent-wash); color: var(--accent-deep); }
.icon svg { width: 22px; height: 22px; }
.icon.spacer { pointer-events: none; }

/* ---- proud zpráv ---- */
.msgs { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  list-style: none; margin: 0; padding: var(--s3) var(--s3) var(--s4); display: flex; flex-direction: column; gap: var(--s2); }
.msg { display: flex; flex-direction: column; max-width: 82%; }
.msg.user { align-self: flex-end; align-items: flex-end; }
.msg.assistant { align-self: flex-start; align-items: flex-start; }
.bub { padding: 10px 14px; border-radius: var(--r-bub); font-family: var(--hy); font-size: 16.5px; line-height: 1.5;
  overflow-wrap: anywhere; text-wrap: pretty; white-space: pre-wrap; }
.user .bub { background: var(--accent); color: var(--on-accent); border-bottom-right-radius: 6px; }
.assistant .bub { background: var(--surface); color: var(--ink); border: 1px solid var(--rule); border-bottom-left-radius: 6px; box-shadow: var(--sh1); }
.msg time { font-family: var(--ui); font-size: 11.5px; color: var(--ink-faint); padding: 3px 6px 0; font-variant-numeric: tabular-nums; }
.msg .voice { display: inline-flex; align-items: baseline; gap: 6px; }
.msg .voice svg { width: 15px; height: 15px; opacity: .75; flex: 0 0 auto; align-self: center; }
.msg .warn { display: block; margin-top: 6px; font-family: var(--ui); font-size: 12px; color: var(--danger); }
.assistant .bub audio { display: block; width: 100%; margin-top: var(--s2); height: 34px; }
.msg.failed .bub { border-color: var(--danger); color: var(--danger); }

.media { list-style: none; margin: var(--s2) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; }
.media img { width: 100%; height: 96px; object-fit: cover; border-radius: 8px; display: block; }
.media .warn { display: block; font-size: 12px; opacity: .75; color: inherit; }   /* stav obrázku není chyba — bez červené z .msg .warn */
.links { list-style: none; margin: var(--s2) 0 0; padding: 0; display: grid; gap: 6px; }
.links a { display: flex; align-items: center; gap: var(--s2); padding: 9px 11px; border-radius: 11px; text-decoration: none;
  background: var(--accent-wash); color: var(--accent-deep); font-family: var(--hy); font-size: 14.5px; }
.links a svg { width: 15px; height: 15px; flex: 0 0 auto; opacity: .8; }

.day { align-self: center; font-family: var(--ui); font-size: 11.5px; letter-spacing: .04em; color: var(--ink-faint); padding: 2px 10px; }
.system { align-self: center; max-width: 90%; text-align: center; font-family: var(--hy); font-size: 12.5px; color: var(--ink-faint);
  border: 1px dashed var(--rule); border-radius: var(--r-pill); padding: 3px 12px; }

.typing { display: inline-flex; gap: 5px; align-items: center; padding: 15px 16px; }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-faint); animation: blip 1.1s infinite; }
.typing i:nth-child(2) { animation-delay: .16s; } .typing i:nth-child(3) { animation-delay: .32s; }
@keyframes blip { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
.searching { font-family: var(--hy); font-size: 14.5px; color: var(--ink-soft); font-style: italic; }

/* prázdný chat: pozdrav a návrhy dotazů */
.empty { flex: 1; align-self: stretch; max-width: none; display: flex; flex-direction: column; justify-content: flex-end; gap: var(--s3); padding-bottom: var(--s2); }
.empty .hi { text-align: center; }
.empty .hi .logo { width: 54px; height: 54px; border-radius: 16px; background: var(--accent); color: var(--on-accent);
  display: grid; place-items: center; margin: 0 auto var(--s3); box-shadow: var(--sh1); }
.empty .hi .logo svg { width: 28px; height: 28px; }
.empty .hi p { margin: 0; font-family: var(--hy); font-size: 17px; color: var(--ink); }
.empty .hi span { display: block; margin-top: 4px; font-size: 13px; color: var(--ink-faint); font-family: var(--hy); }
.chips { display: grid; gap: var(--s2); }
.chips button { text-align: start; padding: 11px 14px; border: 1px solid var(--rule); border-radius: var(--r-card);
  background: var(--surface); color: var(--ink); font-family: var(--hy); font-size: 14.5px; box-shadow: var(--sh1); }

/* pilulka „nová zpráva“ a krátká hláška */
.jump { position: absolute; left: 50%; bottom: 96px; z-index: 3; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border: 1px solid var(--rule); border-radius: var(--r-pill);
  background: var(--raise); color: var(--ink-soft); font-family: var(--hy); font-size: 13px; box-shadow: var(--sh2); }
.jump svg { width: 14px; height: 14px; }
.toast { position: absolute; left: 50%; bottom: 96px; z-index: 4; transform: translateX(-50%); margin: 0; max-width: 88%;
  padding: 8px 14px; border-radius: var(--r-pill); background: var(--ink); color: var(--ground); opacity: .94;
  font-family: var(--hy); font-size: 13px; text-align: center; box-shadow: var(--sh2); }

/* ---- skladba zprávy ---- */
.composer { flex: 0 0 auto; display: flex; align-items: flex-end; gap: var(--s2);
  padding: var(--s2) var(--s2) calc(var(--s2) + env(safe-area-inset-bottom));
  background: var(--surface); border-top: 1px solid var(--rule); }
#text-input { flex: 1; min-height: 44px; max-height: 132px; resize: none; padding: 11px 15px; border: 1px solid var(--rule);
  border-radius: 22px; background: var(--ground); color: var(--ink); font: 16px/1.4 var(--hy); }
#text-input::placeholder { color: var(--ink-faint); }
#text-input:focus { outline: none; border-color: var(--accent); }
.act { width: var(--tap); height: var(--tap); flex: 0 0 auto; display: grid; place-items: center; border: 0; border-radius: 50%;
  background: var(--accent); color: var(--on-accent); cursor: pointer; touch-action: none;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease); }
.act svg { width: 21px; height: 21px; }
.act:active { transform: scale(.94); }
.act:disabled { opacity: .5; }

/* nahrávání */
.composer.rec { align-items: center; gap: var(--s3); }
.composer.rec #text-input { display: none; }
.reclive { flex: 1; display: flex; align-items: center; gap: var(--s2); min-width: 0; }
.reclive .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--danger); animation: pulse 1.1s infinite; flex: 0 0 auto; }
@keyframes pulse { 50% { opacity: .25; } }
.reclive .t { font-variant-numeric: tabular-nums; font-size: 14px; color: var(--ink); flex: 0 0 auto; }
.reclive .wave { flex: 1 1 48px; min-width: 48px; height: 26px; display: flex; align-items: center; justify-content: flex-start; gap: 2px; overflow: hidden; }
.reclive .wave i { width: 3px; height: 3px; border-radius: 2px; background: var(--accent); opacity: .85; }
.reclive .hintx { font-family: var(--hy); font-size: 12.5px; color: var(--ink-faint); white-space: nowrap; flex: 0 0 auto; }
.composer.rec .act { background: var(--danger); }
.composer.cancelling .reclive .hintx, .composer.cancelling .reclive .t { color: var(--danger); }
.composer.cancelling .reclive .wave i { background: var(--danger); opacity: .5; }

/* ---- boční panel ---- */
.scrim { position: fixed; inset: 0; z-index: 8; background: rgba(9, 20, 18, .45);
  opacity: 0; transition: opacity var(--dur) var(--ease); }
.scrim.on { opacity: 1; }
.drawer { position: fixed; z-index: 9; inset: 0 auto 0 0; width: min(86%, 330px); display: flex; flex-direction: column;
  background: var(--surface); border-right: 1px solid var(--rule); box-shadow: var(--sh2);
  transform: translateX(-102%); visibility: hidden;
  transition: transform var(--dur) var(--ease), visibility var(--dur); }
.drawer.on { transform: none; visibility: visible; }
.dr-top { padding: max(10px, env(safe-area-inset-top)) var(--s3) var(--s2); display: flex; align-items: center; gap: var(--s2); }
.search { flex: 1; display: flex; align-items: center; gap: var(--s2); padding: 9px 12px; border-radius: var(--r-pill);
  background: var(--ground); border: 1px solid var(--rule); }
.search svg { width: 16px; height: 16px; color: var(--ink-faint); flex: 0 0 auto; }
.search input { flex: 1; min-width: 0; border: 0; padding: 0; background: none; color: var(--ink); font: 14.5px var(--hy); }
.search input:focus { outline: none; }
.search input::placeholder { color: var(--ink-faint); }
.dr-new { margin: var(--s1) var(--s3) var(--s2); padding: 11px 14px; display: flex; align-items: center; gap: var(--s2);
  border: 1px solid var(--rule); border-radius: var(--r-card); background: var(--accent-wash); color: var(--accent-deep);
  font-family: var(--hy); font-size: 15px; font-weight: 600; }
.dr-new svg { width: 18px; height: 18px; }
.dr-list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 var(--s2) var(--s3); }
.grp { margin: var(--s3) var(--s2) var(--s1); font-family: var(--ui); font-size: 11.5px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-faint); }
.conv { width: 100%; text-align: start; display: block; padding: 10px 12px; margin-bottom: 2px; border: 0; border-radius: var(--r-card);
  background: none; color: var(--ink); }
.conv:active { background: var(--ground); }
.conv.current { background: var(--accent-wash); }
.conv .t { display: block; font-family: var(--hy); font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv.current .t { color: var(--accent-deep); }
.conv .s { display: block; margin-top: 1px; font-size: 12px; color: var(--ink-faint); }
.dr-foot { flex: 0 0 auto; border-top: 1px solid var(--rule); padding: var(--s2) var(--s2) calc(var(--s2) + env(safe-area-inset-bottom)); }
.dr-row { width: 100%; display: flex; align-items: center; gap: var(--s3); padding: 11px 12px; border: 0; border-radius: var(--r-card);
  background: none; color: var(--ink); font-family: var(--hy); font-size: 15px; text-align: start; }
.dr-row:active { background: var(--ground); }
.dr-row svg { width: 19px; height: 19px; color: var(--ink-soft); flex: 0 0 auto; }
.who { display: flex; align-items: center; gap: var(--s3); padding: var(--s2) 12px 0; }
.ava { width: 34px; height: 34px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center; background: var(--accent);
  color: var(--on-accent); font-size: 13px; font-weight: 600; font-family: var(--hy); }
.who .nm { flex: 1; min-width: 0; font-family: var(--hy); font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- prohlížení staré konverzace ---- */
.summary { flex: 0 0 auto; margin: var(--s3) var(--s3) 0; padding: 11px 14px; border-radius: var(--r-card);
  background: var(--accent-wash); color: var(--accent-deep); font-family: var(--hy); font-size: 13.5px; line-height: 1.5; }
.resume { flex: 0 0 auto; padding: var(--s3) var(--s3) calc(var(--s3) + env(safe-area-inset-bottom));
  background: var(--surface); border-top: 1px solid var(--rule); }
.btn-primary { width: 100%; padding: 14px; border: 0; border-radius: var(--r-card); background: var(--accent); color: var(--on-accent);
  font-family: var(--hy); font-size: 16px; font-weight: 600; cursor: pointer; }
.btn-primary:disabled { opacity: .5; }
.resume .rhint { margin: var(--s2) 0 0; text-align: center; font-family: var(--hy); font-size: 12px; color: var(--ink-faint); }

/* ---- paměť ---- */
.mems { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--s3);
  display: grid; gap: var(--s2); align-content: start; }
.mems .lead { margin: 0 0 var(--s1); font-family: var(--hy); font-size: 13px; color: var(--ink-soft); }
.mem { padding: 11px 13px; border: 1px solid var(--rule); border-radius: var(--r-card); background: var(--surface); box-shadow: var(--sh1); }
.mem .h { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--ink-faint); }
.mem .h .sep { opacity: .5; }
.mem .h .x { margin-inline-start: auto; width: 30px; height: 30px; flex: 0 0 auto; display: grid; place-items: center; border: 0;
  border-radius: 50%; background: none; color: var(--ink-faint); }
.mem .h .x:active { background: var(--danger-wash); color: var(--danger); }
.mem .h .x svg { width: 16px; height: 16px; }
.mem .c { margin-top: 5px; font-family: var(--hy); font-size: 15px; line-height: 1.5; }
.tag { padding: 1px 8px; border-radius: var(--r-pill); background: var(--accent-wash); color: var(--accent-deep); font-family: var(--hy); font-size: 11px; }
.tag.mate { background: #F3E2C0; color: #6A4A05; }
@media (prefers-color-scheme: dark) { .tag.mate { background: #3A2E14; color: #E8C87E; } }
.mems .hint, .dr-list .hint { text-align: center; color: var(--ink-faint); font-family: var(--hy); }

/* ---- přihlášení (přebíjí #login z app.css) ---- */
#login { padding: 0; align-items: stretch; justify-content: flex-start; }
.login { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: var(--s4);
  padding: var(--s5) var(--s5) calc(40px + env(safe-area-inset-bottom)); text-align: start; }
.login .brand { text-align: center; }
.login .brand .logo { width: 62px; height: 62px; margin: 0 auto var(--s3); border-radius: 18px; background: var(--accent);
  color: var(--on-accent); display: grid; place-items: center; box-shadow: var(--sh2); }
.login .brand .logo svg { width: 32px; height: 32px; }
.login .brand h1 { margin: 0; font-family: var(--hy); font-size: 21px; }
.login .brand p { margin: 4px 0 0; font-family: var(--hy); font-size: 13.5px; color: var(--ink-faint); }
.login form { width: 100%; max-width: 360px; margin: 0 auto; display: grid; gap: var(--s3); }
.login label { gap: 5px; font-size: 13px; }
.login input { padding: 13px 14px; border-radius: var(--r-card); font: 16px var(--ui); }
.login input:focus { outline: none; border-color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .drawer, .scrim, .act { transition: none; }
  .typing i, .reclive .dot { animation: none; }
}

.bub strong { font-weight: 700; }