/* Znacka FNC: tmava #111111, oranzova #ff7300, Caveat jako akcentni pismo -
   stejne tokeny, jake uz maji program.* a vyzva.* */
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@600&family=Inter:wght@400;500;600;700&display=swap');

:root {
  --pozadi: #0d0d0d;
  --panel: #161616;
  --panel2: #1e1e1e;
  --linka: #2b2b2b;
  --text: #f2f2f2;
  --text2: #a0a0a0;
  --text3: #6b6b6b;
  --akcent: #ff7300;
  --akcent-tlum: rgba(255, 115, 0, .12);
  --zelena: #3fb950;
  --cervena: #f05252;
  --zluta: #e3b341;
  --r: 12px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--pozadi);
  color: var(--text);
  font: 15px/1.5 Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--akcent); text-decoration: none; }
a:hover { text-decoration: underline; }

.rukou { font-family: Caveat, cursive; font-size: 1.35em; color: var(--akcent); }

/* ---------------------------------------------------------------- prvky */
button, .tlacitko {
  font: inherit; font-weight: 600; cursor: pointer;
  background: var(--akcent); color: #111; border: 0;
  border-radius: 10px; padding: 10px 16px;
  transition: filter .15s;
}
button:hover, .tlacitko:hover { filter: brightness(1.1); text-decoration: none; }
button:disabled { opacity: .5; cursor: default; }
button.tise { background: var(--panel2); color: var(--text); border: 1px solid var(--linka); }
button.tise:hover { background: var(--linka); }

input, textarea, select {
  font: inherit; color: var(--text);
  background: var(--panel2); border: 1px solid var(--linka);
  border-radius: 10px; padding: 10px 12px; width: 100%;
}
input:focus, textarea:focus { outline: 2px solid var(--akcent); outline-offset: -1px; }
textarea { resize: vertical; min-height: 44px; font-family: inherit; }

.karta {
  background: var(--panel); border: 1px solid var(--linka);
  border-radius: var(--r); padding: 18px;
}

.stitek {
  display: inline-block; font-size: 11px; font-weight: 600;
  padding: 3px 8px; border-radius: 999px;
  background: var(--panel2); color: var(--text2); border: 1px solid var(--linka);
  white-space: nowrap;
}
.stitek.akce { background: var(--akcent-tlum); color: var(--akcent); border-color: transparent; }
.stitek.zla { background: rgba(240,82,82,.12); color: var(--cervena); border-color: transparent; }
.stitek.dobra { background: rgba(63,185,80,.12); color: var(--zelena); border-color: transparent; }
.stitek.varovna { background: rgba(227,179,65,.12); color: var(--zluta); border-color: transparent; }

.tlumene { color: var(--text2); }
.male { font-size: 13px; }
.mensi { font-size: 12px; }

/* ---------------------------------------------------------------- chat */
.chat-tok {
  display: flex; flex-direction: column; gap: 8px;
  overflow-y: auto; padding: 4px;
}
.bublina {
  max-width: 78%; padding: 9px 13px; border-radius: 14px;
  font-size: 14px; line-height: 1.45; word-wrap: break-word; white-space: pre-wrap;
}
.bublina.od-nas { align-self: flex-end; background: var(--akcent); color: #111; border-bottom-right-radius: 4px; }
.bublina.od-nich { align-self: flex-start; background: var(--panel2); border: 1px solid var(--linka); border-bottom-left-radius: 4px; }
.bublina .cas { display: block; font-size: 10.5px; opacity: .65; margin-top: 4px; }
.den-oddelovac { align-self: center; font-size: 11px; color: var(--text3); margin: 8px 0 2px; }

.chat-vstup { display: flex; gap: 8px; align-items: flex-end; }
.chat-vstup textarea { flex: 1; max-height: 120px; }

/* ---------------------------------------------------------------- scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--linka); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: #3a3a3a; }