:root {
  /* Barvy */
  --bg: #0b1620;
  --panel: #0f1e2b;
  --panel-2: #0f2130;
  --panel-3: #0c1a26;
  --text: #cbb057;
  --muted: #9fb3c7;
  --line: #1e3344;
  --accent: #2ea8ff;
  --accent-2: #12d39a;
  --danger: #ff5470;
  
  /* Zlatá tlačítka */
  --gold: #ad964d;         
  --gold-border: rgba(173, 150, 77, 0.5); 
  --btn-bg: var(--panel-2); 
  --gold-shadow: #2a2515;

  --radius: 14px;
  --shadow: 0 6px 18px rgba(0,0,0,.25);
  --font-main: system-ui, "Segoe UI", Roboto, Arial, sans-serif;
}
[data-theme="cyber"] {
  /* ... tvé stávající barvy ... */
  --bg: #050510;
  --panel: #0f0f26;
  --panel-2: #16163a;
  --panel-3: #0a0a1a;
  --text: #00f3ff;
  --muted: #8585ad;
  --line: #2a2a5e;
  --accent: #ff00ff;
  --accent-2: #00ff9d;
  --danger: #ff3333;
  --gold: #ff00ff;
  --gold-border: rgba(255, 0, 255, 0.5);
  --btn-bg: #1a0b2e;
  --gold-shadow: #2e002e;
  
  /* NOVÉ PRO BUBLINY */
  --bubble-me: linear-gradient(135deg, #2a2a5e, #16163a);
  --bubble-other: #0f0f26;
}/* === FOREST (Hluboký les) === */
[data-theme="forest"] {
  /* ... stávající ... */
  --bg: #0a110a;
  --panel: #111f11;
  --panel-2: #1a2e1a;
  --panel-3: #0d160d;
  --text: #e0e0e0;
  --muted: #8fa38f;
  --line: #263b26;
  --accent: #4caf50;
  --accent-2: #8bc34a;
  --danger: #e57373;
  --gold: #8bc34a;
  --gold-border: rgba(139, 195, 74, 0.5);
  --btn-bg: #1b2e1b;
  --gold-shadow: #0a1a0a;

  /* NOVÉ */
  --bubble-me: linear-gradient(135deg, #2e4a2e, #1b2e1b);
  --bubble-other: #111f11;
}
/* === OCEAN (Hluboký oceán) === */
[data-theme="ocean"] {
  /* ... stávající ... */
  --bg: #001219;
  --panel: #002233;
  --panel-2: #003049;
  --panel-3: #001824;
  --text: #caf0f8;
  --muted: #90e0ef;
  --line: #004d73;
  --accent: #0077b6;
  --accent-2: #00b4d8;
  --danger: #ff5470;
  --gold: #00b4d8;
  --gold-border: rgba(0, 180, 216, 0.5);
  --btn-bg: #00334d;
  --gold-shadow: #00111a;

  /* NOVÉ */
  --bubble-me: linear-gradient(135deg, #005f87, #003049);
  --bubble-other: #002233;
}
/* === CRIMSON (Upírská noc) === */
[data-theme="crimson"] {
  /* ... stávající ... */
  --bg: #1a0505;
  --panel: #2b0a0a;
  --panel-2: #3d0e0e;
  --panel-3: #210505;
  --text: #ffcccc;
  --muted: #b36666;
  --line: #5e1b1b;
  --accent: #ff0000;
  --accent-2: #ff4d4d;
  --danger: #ff9999;
  --gold: #ff3333;
  --gold-border: rgba(255, 51, 51, 0.5);
  --btn-bg: #3d0e0e;
  --gold-shadow: #1a0000;

  /* NOVÉ */
  --bubble-me: linear-gradient(135deg, #590d0d, #3d0e0e);
  --bubble-other: #2b0a0a;
}
/* === ROYAL (Fialový luxus) === */
[data-theme="royal"] {
  /* ... stávající ... */
  --bg: #10002b;
  --panel: #240046;
  --panel-2: #3c096c;
  --panel-3: #190042;
  --text: #e0aaff;
  --muted: #9d4edd;
  --line: #5a189a;
  --accent: #7b2cbf;
  --accent-2: #c77dff;
  --danger: #ff006e;
  --gold: #e0aaff;
  --gold-border: rgba(224, 170, 255, 0.5);
  --btn-bg: #3c096c;
  --gold-shadow: #10002b;

  /* NOVÉ */
  --bubble-me: linear-gradient(135deg, #5a189a, #3c096c);
  --bubble-other: #240046;
}/* === COFFEE (Ranní káva) === */
[data-theme="coffee"] {
  --bg: #14100c;
  --panel: #1f1915;
  --panel-2: #2b221d;
  --panel-3: #181310;
  --text: #dcc8b3;
  --muted: #8f7866;
  --line: #3d3029;
  --accent: #d2691e;       /* Čokoládová */
  --accent-2: #cd853f;     /* Peru */
  --danger: #ff6b6b;
  --gold: #deb887;         /* Burlywood (Kávová pěna) */
  --gold-border: rgba(222, 184, 135, 0.5);
  --btn-bg: #2b221d;
  --gold-shadow: #0f0b09;
  --bubble-me: linear-gradient(180deg, #5c4033, #3e2b22);
  --bubble-other: #2b221d;
}

/* === MATRIX (Hacker) === */
[data-theme="matrix"] {
  /* ... stávající ... */
  --bg: #000000;
  --panel: #050f05;
  --panel-2: #0a1f0a;
  --panel-3: #000000;
  --text: #00ff00;
  --muted: #008f00;
  --line: #003300;
  --accent: #00cc00;
  --accent-2: #33ff33;
  --danger: #ff0000;
  --gold: #00ff00;
  --gold-border: rgba(0, 255, 0, 0.5);
  --btn-bg: #0a1f0a;
  --gold-shadow: #001100;

  /* NOVÉ */
  --bubble-me: #003300;
  --bubble-other: #050f05;
}

/* === SYNTHWAVE (Doplněno) === */
[data-theme="synth"] {
  /* ... stávající ... */
  --bg: #241734;
  --panel: #2e1d42;
  --panel-2: #3a2552;
  --panel-3: #1f132e;
  --text: #ffb8de;
  --muted: #a67db8;
  --line: #523470;
  --accent: #00f3ff;
  --accent-2: #ff00ff;
  --danger: #ff2a6d;
  --gold: #ffd700;
  --gold-border: rgba(255, 215, 0, 0.5);
  --btn-bg: #3a2552;
  --gold-shadow: #150d1f;

  /* NOVÉ */
  --bubble-me: linear-gradient(135deg, #b5179e, #7209b7);
  --bubble-other: #2e1d42;
}/* === JANTAR (Amber) === */
[data-theme="amber"] {
  --bg: #1a1205;
  --panel: #2e200a;
  --panel-2: #3d2b0e;
  --panel-3: #241807;
  --text: #ffeebb;
  --muted: #b39b72;
  --line: #4d3611;
  --accent: #ff8c00;       /* Tmavě oranžová */
  --accent-2: #ffa500;     /* Oranžová */
  --danger: #ff4d4d;
  --gold: #ffbf00;         /* Jantarová žlutá */
  --gold-border: rgba(255, 191, 0, 0.5);
  --btn-bg: #3d2b0e;
  --gold-shadow: #120c02;
  --bubble-me: linear-gradient(135deg, #664d00, #4d3a00);
  --bubble-other: #3d2b0e;
}

/* === SEVER (Nordic) === */
[data-theme="nord"] {
  /* ... stávající ... */
  --bg: #242933;
  --panel: #2e3440;
  --panel-2: #3b4252;
  --panel-3: #292e39;
  --text: #eceff4;
  --muted: #d8dee9;
  --line: #4c566a;
  --accent: #88c0d0;
  --accent-2: #a3be8c;
  --danger: #bf616a;
  --gold: #88c0d0;
  --gold-border: rgba(136, 192, 208, 0.5);
  --btn-bg: #3b4252;
  --gold-shadow: #1d2129;

  /* NOVÉ */
  --bubble-me: linear-gradient(135deg, #434c5e, #3b4252);
  --bubble-other: #2e3440;
}/* === DRACULA (Upír) === */
[data-theme="dracula"] {
  --bg: #282a36;
  --panel: #44475a;
  --panel-2: #383a59;
  --panel-3: #21222c;
  --text: #f8f8f2;
  --muted: #6272a4;
  --line: #44475a;
  --accent: #bd93f9;       /* Purple */
  --accent-2: #ff79c6;     /* Pink */
  --danger: #ff5555;
  --gold: #bd93f9;         /* Hlavní barva je fialová */
  --gold-border: rgba(189, 147, 249, 0.5);
  --btn-bg: #44475a;
  --gold-shadow: #191a21;
  --bubble-me: linear-gradient(135deg, #6272a4, #44475a);
  --bubble-other: #44475a;
}

/* === SAKURA (Japonská třešeň) === */
[data-theme="sakura"] {
  --bg: #2d1b2e;
  --panel: #42263a;
  --panel-2: #54324a;
  --panel-3: #241224;
  --text: #ffd1dc;         /* Světle růžová */
  --muted: #b07d96;
  --line: #6b3e5e;
  --accent: #ff9ebd;
  --accent-2: #ffb7c5;
  --danger: #ff5c8d;
  --gold: #ff9ebd;         /* Růžová */
  --gold-border: rgba(255, 158, 189, 0.5);
  --btn-bg: #42263a;
  --gold-shadow: #1f0b1f;
  --bubble-me: linear-gradient(135deg, #8a4b6e, #54324a);
  --bubble-other: #42263a;
}

/* === NOIR (Černobílá klasika) === */
[data-theme="noir"] {
  --bg: #000000;
  --panel: #1a1a1a;
  --panel-2: #262626;
  --panel-3: #0d0d0d;
  --text: #ffffff;
  --muted: #808080;
  --line: #333333;
  --accent: #ffffff;
  --accent-2: #cccccc;
  --danger: #ffffff;       /* I danger je bílá, jen tučná */
  --gold: #ffffff;         /* Vše je bílé */
  --gold-border: rgba(255, 255, 255, 0.5);
  --btn-bg: #1a1a1a;
  --gold-shadow: #333333;
  --bubble-me: #333333;
  --bubble-other: #1a1a1a;
}

/* === TOXIC (Výstraha) === */
[data-theme="toxic"] {
  --bg: #1a1a00;
  --panel: #333300;
  --panel-2: #4d4d00;
  --panel-3: #121200;
  --text: #ffff00;         /* Jedovatá žlutá */
  --muted: #999900;
  --line: #4d4d00;
  --accent: #ccff00;
  --accent-2: #ccff33;
  --danger: #ff3300;
  --gold: #ffff00;
  --gold-border: rgba(255, 255, 0, 0.5);
  --btn-bg: #333300;
  --gold-shadow: #0f0f00;
  --bubble-me: linear-gradient(135deg, #666600, #4d4d00);
  --bubble-other: #333300;
}

/* === NEBULA (Vesmírná mlhovina) === */
[data-theme="nebula"] {
  --bg: #0f0c29;
  --panel: #302b63;
  --panel-2: #24243e;
  --panel-3: #08061a;
  --text: #e0e0e0;
  --muted: #8ca6db;
  --line: #3b3a5e;
  --accent: #00d2ff;
  --accent-2: #3a7bd5;
  --danger: #f53844;
  --gold: #00d2ff;         /* Azurová */
  --gold-border: rgba(0, 210, 255, 0.5);
  --btn-bg: #302b63;
  --gold-shadow: #05030f;
  --bubble-me: linear-gradient(to right, #24243e, #302b63);
  --bubble-other: #302b63;
}
/* === ZEN (Kámen a klid) === */
[data-theme="zen"] {
  --bg: #1c1c1c;
  --panel: #2a2a2a;
  --panel-2: #333333;
  --panel-3: #111111;
  --text: #cccccc;         /* Jemná šedá */
  --muted: #777777;
  --line: #444444;
  --accent: #999999;       /* Neutrální */
  --accent-2: #bbbbbb;
  --danger: #cc6666;       /* Tlumená červená */
  --gold: #999999;         /* Šedá místo zlaté */
  --gold-border: rgba(153, 153, 153, 0.5);
  --btn-bg: #2a2a2a;
  --gold-shadow: #0f0f0f;
  --bubble-me: #333333;
  --bubble-other: #2a2a2a;
}

/* === MINT (Máta a čokoláda) === */
[data-theme="mint"] {
  --bg: #0f1c15;
  --panel: #1b2e24;
  --panel-2: #253d30;
  --panel-3: #08100c;
  --text: #d8f3dc;         /* Pastelová mentolová */
  --muted: #74c69d;
  --line: #2d6a4f;
  --accent: #95d5b2;       /* Světlá máta */
  --accent-2: #b7e4c7;
  --danger: #d98c8c;
  --gold: #95d5b2;         
  --gold-border: rgba(149, 213, 178, 0.5);
  --btn-bg: #1b2e24;
  --gold-shadow: #050a07;
  --bubble-me: linear-gradient(135deg, #2d6a4f, #1b4332);
  --bubble-other: #1b2e24;
}

/* === SAND (Pouštní duny) === */
[data-theme="sand"] {
  --bg: #1f1b18;
  --panel: #2e2824;
  --panel-2: #3d3530;
  --panel-3: #14110f;
  --text: #e6dace;         /* Krémová */
  --muted: #a89f91;
  --line: #4a403a;
  --accent: #d4c5a0;       /* Písková */
  --accent-2: #e3d5b8;
  --danger: #c98a8a;
  --gold: #d4c5a0;
  --gold-border: rgba(212, 197, 160, 0.5);
  --btn-bg: #2e2824;
  --gold-shadow: #0f0d0c;
  --bubble-me: linear-gradient(135deg, #594d46, #3d3530);
  --bubble-other: #2e2824;
}

/* === SLATE (Břidlice) === */
[data-theme="slate"] {
  --bg: #202225;
  --panel: #2f3136;
  --panel-2: #36393f;
  --panel-3: #18191c;
  --text: #dcddde;         /* Discord-like bílá */
  --muted: #72767d;
  --line: #40444b;
  --accent: #7289da;       /* Tlumená modrá */
  --accent-2: #99aab5;
  --danger: #f04747;
  --gold: #7289da;
  --gold-border: rgba(114, 137, 218, 0.5);
  --btn-bg: #2f3136;
  --gold-shadow: #151618;
  --bubble-me: #36393f;
  --bubble-other: #2f3136;
}

/* === VINTAGE (Stará fotka) === */
[data-theme="vintage"] {
  --bg: #2b211e;
  --panel: #3d2f2b;
  --panel-2: #4e3d38;
  --panel-3: #1f1816;
  --text: #d6c6b2;         /* Sépiová bílá */
  --muted: #8c7b6c;
  --line: #5c4a42;
  --accent: #c4a484;       /* Světle hnědá */
  --accent-2: #e0c9a6;
  --danger: #bf7070;
  --gold: #c4a484;
  --gold-border: rgba(196, 164, 132, 0.5);
  --btn-bg: #3d2f2b;
  --gold-shadow: #140f0e;
  --bubble-me: linear-gradient(135deg, #5c4a42, #3d2f2b);
  --bubble-other: #3d2f2b;
}
[data-theme="default"] {
  --bg: #0b1620;
  --panel: #0f1e2b;
  --panel-2: #0f2130;
  --panel-3: #0c1a26;
  /* ... atd ... */
  
  /* NOVÉ */
  --bubble-me: linear-gradient(180deg, #122a3e, #0f2130);
  --bubble-other: #0f1e2b;
}
* { box-sizing: border-box; }

html { height: 100%; }

body {
  margin: 0;
  min-height: 100vh; 
  color: var(--text);
  font-family: var(--font-main) !important;
  background: radial-gradient(1200px 600px at 20% -10%, #102237 0%, var(--bg) 55%) fixed var(--bg);
  /* Zmenšené písmo pro ostřejší vzhled */
  font: 14px/1.5 system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* Hlavní obal stránky - roztažený na šířku */
.wrap {
  max-width: 100%;
  margin: 0;
  padding: 10px 20px;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

h1 { font-size: 2.2rem; margin: 0 0 .25rem; }
p.lead { opacity: .88; margin: .25rem 0 1.1rem; }
a { color: #9ad1ff; }
a:hover { color: #c6e6ff; }

/* ========================================= */
/* === TLAČÍTKA (Sjednocený 3D vzhled) === */
/* ========================================= */

button, .btn, .btn-primary, .btn-ghost, #send, nav a {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  
  font-family: inherit;
  font-weight: 600;
  font-size: 0.85rem;
  text-decoration: none;
  text-align: center;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  
  margin-bottom: 4px; /* Místo pro stisk */
  
  /* Tmavý základ se zlatým rámečkem */
  background: var(--btn-bg) !important; 
  border: 1px solid var(--gold-border) !important;
  color: var(--gold) !important;
  border-radius: 6px !important;
  padding: 6px 12px;

  /* 3D efekt */
  box-shadow: 0 3px 0 var(--gold-shadow), 0 4px 6px rgba(0,0,0,0.3) !important;   
  transition: all 0.1s ease-out;
  position: relative;
  transform: translateY(0);
  
  /* Zabrání označování textu při zběsilém klikání */
  user-select: none;
}

/* Hover - rozsvícení */
button:hover, .btn:hover, nav a:hover {
  border-color: var(--gold) !important;
  color: #ebdcb2 !important;
  background: rgba(173, 150, 77, 0.1) !important;
  transform: translateY(-2px);
  box-shadow: 0 5px 0 var(--gold-shadow), 0 8px 12px rgba(0,0,0,0.4) !important;
}

/* Active - stisknutí (fyzický pohyb dolů) */
button:active, .btn:active, nav a:active {
  transform: translateY(3px) !important;
  box-shadow: 0 0 0 var(--gold-shadow), inset 0 2px 4px rgba(0,0,0,0.4) !important;
  border-color: var(--gold-border) !important;
}

/* TRVALE AKTIVNÍ TLAČÍTKO (např. vybraná složka) */
/* Nebude zamačknuté, ale bude SVÍTIT */
button.active, .btn.active {
  background: var(--gold) !important;
  color: #0b1620 !important; /* Černý text */
  border-color: var(--gold) !important;
  transform: translateY(0); /* Zůstane na místě */
  box-shadow: 0 3px 0 #5c4f24, 0 0 15px rgba(173, 150, 77, 0.4) !important;
}

/* Oprava pro navigační lištu */
header.sitebar .btn, header.sitebar a { margin-right: 5px; }

/* ========================================= */
/* === ODZNAČKY (Badges) === */
/* ========================================= */
.badge {
  display: inline-block;
  min-width: 1.2rem;
  padding: 0 .4rem;
  /* Důležitá oprava pro Flexbox v tlačítku */
  margin-left: auto; 
  
  border-radius: 999px;
  font-size: .75rem;
  line-height: 1.2rem;
  text-align: center;
  background: var(--accent);
  color: #04131f;
  
  /* OPRAVA KLIKÁNÍ: Kliknutí skrz číslo projde na tlačítko */
  pointer-events: none; 
}

/* ========================================= */
/* === LAYOUT CHATU A PANELŮ === */
/* ========================================= */

.shell {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.pane {
  display: flex;
  flex-direction: column;
  position: relative; /* Nutné pro sticky composer */
  min-height: auto;
}

/* Levý panel */
.side {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  box-shadow: var(--shadow);
  /* Zajištění, že tlačítka uvnitř fungují */
  z-index: 5; 
}

/* Obsah levého panelu */
.side .group {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
  margin: .6rem 0 0;
}

.side .group-title {
  margin: .1rem 0 .4rem;
  font-size: .9rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .02em;
  font-weight: 600;
}

/* Inputy a tlačítka v panelu na plnou šířku */
.side input {
    width: 100%;
}
.side .mailbox button, .side .smart button {
  width: 100%;
  justify-content: space-between; /* Text vlevo, číslo vpravo */
  padding-left: 12px;
  padding-right: 12px;
}
/* === OPRAVA ROZLOŽENÍ TLAČÍTEK V PANELU === */

/* 1. Hlavní navigační tlačítka - ta CHCEME roztáhnout */
.side .bar button,          /* Filtry (osobní, rozepsané...) */
.side .mailbox button,      /* Schránka (přijaté...) */
.side .auth-actions .btn,   /* Přihlásit/Registrovat */
.side #user-panel .btn {    /* Moje konverzace */
  width: 100%;
  display: flex;
  justify-content: center; /* Text na střed */
  margin-bottom: 6px;      /* Malá mezera mezi nimi */
}

/* 2. Tlačítka s odznaky (Schránka) - text vlevo, číslo vpravo */
.side .mailbox button {
  justify-content: space-between; 
  padding-left: 16px;
  padding-right: 16px;
}

/* 3. Tlačítka v hlavičkách (Upravit, Měsíc, Křížek) - ta necháme PŘIROZENÁ */
.side .group-title + button, /* Tlačítko vedle nadpisu */
.side #themeToggle,
.side .close-menu-btn {
  width: auto;             /* Velikost jen podle obsahu */
  padding: 4px 12px;       /* Menší polstrování */
  min-width: 0;            /* Aby se nebála zmenšit */
  margin-left: auto;       /* Pokud jsou ve flexu, hodí je to doprava */
}

/* 4. Estetika: Tlačítko "Upravit" vedle nadpisu */
.side .group h3 + button {
  font-size: 0.75rem;
  padding: 2px 10px;
  margin-left: auto;       /* Zarovná se hezky doprava */
  margin-bottom: 0;        /* Zrušíme spodní mezeru, aby lícovalo s nadpisem */
}
/* Seznam zpráv */
#list {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 20px;
  overflow-y: auto;
}

/* Bubliny zpráv */
.msg.mine { margin-left: auto; background: linear-gradient(180deg, #122a3e, #0f2130); }
.msg:not(.mine) { margin-right: auto; }

/* Ocásek bubliny */
.msg { 
  position: relative; 
  padding: 10px 14px; 
  border-radius: var(--bubble-radius); /* <--- TADY JE ZMĚNA */
  border: 1px solid var(--line); 
  background: var(--panel); 
  max-width: 85%; 
}.msg::after {
  content: ""; position: absolute; bottom: -1px; width: 10px; height: 10px;
  background: inherit; border-left: 1px solid var(--line); border-bottom: 1px solid var(--line);
  transform: rotate(45deg);
}
.msg.mine::after { right: 8px; }
.msg:not(.mine)::after { left: 8px; }

/* ========================================= */
/* === COMPOSER (Lišta pro psaní) === */
/* ========================================= */

.pane .composer {
  display: flex;
  gap: 12px;
  align-items: center;
  
  background: var(--panel-2); 
  border-top: 1px solid var(--line);
  
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 16px 20px;
  width: 100%;
  z-index: 1000; 
  position: sticky;
  bottom: 0;
}
/* Input "kapsle" */
.msg-input {
  flex: 1;
  min-width: 0;
  background: var(--panel-3);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 10px 16px;
  font-size: 0.95rem;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
}
.msg-input:focus {
  outline: none;
  border-color: var(--gold);
  background: var(--panel-2);
}

/* Tlačítko Poslat v liště */
#send {
  border-radius: 24px !important;
  padding: 0 24px !important;
  height: 40px;
  margin-bottom: 0 !important;
  z-index: 1001; /* Musí být nad lištou */
}

/* ... tvůj existující kód ... */

/* Zajištění, že chat-shell bude vždy FLEX a ne GRID */
@media (min-width: 901px) {
  .chat-shell {
    display: flex !important; /* Důležité: Přebije grid z .shell */
    gap: 0 !important;        /* Reset mezery z gridu */
  }
}

/* === Tlačítko pro zavření uvnitř menu (NOVÉ) === */
.close-menu-btn {
  display: none; /* Na PC ho nechceme */
  background: transparent !important;
  border: none !important;
  color: var(--danger) !important;
  font-size: 1.5rem;
  box-shadow: none !important;
  padding: 4px 8px;
  margin-left: auto; /* Zarovnání doprava */
}

/* Zobrazit zavírací tlačítko jen na mobilu */
@media (max-width: 900px) {
  .close-menu-btn {
    display: block; 
  }
  
  /* Oprava: Když je menu otevřené, side musí být přes celou šířku */
  .chat-shell.menu-open .side {
    width: 100% !important;
    z-index: 2000; /* Aby bylo menu nahoře */
  }
}
/* ========================================= */
/* === MOBILNÍ VERZE (do 900px) === */
/* ========================================= */

@media (max-width: 900px) {
  .shell { display: flex; flex-direction: column; gap: 20px; }
  .side { position: static; width: 100%; margin-bottom: 10px; z-index: 1; }
  .pane .composer { position: sticky; bottom: 0; }
  #list { padding-bottom: 80px; }
}

/* Ostatní pomocné třídy (Hero, Karty na home) */
.hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: center; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.card { padding: 14px; background: var(--panel-2); border-radius: 12px; border: 1px solid var(--line); display: block; text-decoration: none; color: var(--text); }
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } }
/* ========================================= */
/* === OPRAVA VZHLEDU PROFILU A INPUTŮ (V8) === */
/* ========================================= */

/* 1. Oprava Profilové karty (vrátíme jí vzhled) */
.profile-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 15px;
  position: relative;
  z-index: 10; /* Aby byla nad vším */
}

.profile-main {
  display: flex;
  align-items: center;
  gap: 12px;
}

.profile-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%; /* Kulaté */
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #000;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.profile-text {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.profile-name { font-weight: 700; color: var(--text); }
.profile-handle { font-size: 0.85rem; color: var(--muted); }

.profile-meta {
  display: flex;
  gap: 15px;
  margin: 0;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.05);
}

.profile-meta-item { display: flex; flex-direction: column; }
.profile-meta-item dt { font-size: 0.7rem; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.profile-meta-item dd { margin: 0; font-family: monospace; font-size: 0.9rem; }

/* 2. Oprava Inputů v levém panelu (aby byly vidět a hezké) */
.side label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.85rem;
  color: var(--muted);
  font-weight: 600;
}

.side input[type="text"] {
  width: 100%;
  background: var(--panel-3);
  border: 1px solid var(--line);
  color: var(--text);
  padding: 8px 12px;
  border-radius: 8px;
  margin-bottom: 12px;
  font-family: inherit;
  font-size: 0.9rem;
}

.side input[type="text"]:focus {
  outline: none;
  border-color: var(--gold);
  background: var(--panel-2);
  box-shadow: 0 0 0 2px rgba(173, 150, 77, 0.1);
}
/* ========================================= */
/* === V9: OPRAVA ZOBRAZENÍ ODPOVĚDI (REPLY CHIP) === */
/* ========================================= */

/* Ujistíme se, že rodič (lišta composer) je relační bod */
.pane .composer {
  position: sticky;
  bottom: 0;
  /* Důležité: aby absolutně pozicovaný prvek věděl, k čemu se vztahovat */
  z-index: 1000;
}

/* SAMOTNÝ ŠTÍTEK ODPOVĚDI */
.reply-chip {
  /* Vytáhneme ho z běžného toku dokumentu */
  position: absolute !important;
  /* Umístíme ho PŘESNĚ NAD spodní lištu */
  bottom: 100%;
  left: 15px;   /* Odsazení zleva */
  right: 15px;  /* Odsazení zprava (aby nebyl přes celou šířku) */
  margin-bottom: 10px; /* Mezera mezi štítkem a inputem */

  /* Vzhled štítku */
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 10px;

  background: var(--panel-2) !important; /* Neprůhledné tmavé pozadí */
  /* Jemný zelený okraj pro zvýraznění, že jde o odpověď */
  border: 1px solid rgba(18, 211, 154, 0.3) !important;
  border-left: 4px solid var(--accent-2) !important; /* Výraznější levý okraj */
  border-radius: 8px !important;

  padding: 8px 12px !important;
  box-shadow: 0 -4px 15px rgba(0,0,0,0.2) !important; /* Stín směrem nahoru */
  z-index: 1002; /* Musí být nad vším ostatním */

  /* Reset starých stylů, které překážely */
  max-width: none !important;
  width: auto !important;
  white-space: normal !important; /* Povolíme zalomení textu */
}

/* Text uvnitř štítku */
.reply-chip-text {
  flex: 1; /* Zabere dostupné místo */
  font-size: 0.9rem;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; /* Dlouhý text se zkrátí tečkami */
}

/* Tlačítko zavřít (X) */
#replyChipClose {
  margin: 0 !important;
  padding: 4px !important;
  width: 28px;
  height: 28px;
  font-size: 1.2rem;
  line-height: 1;
  color: var(--muted) !important;

  /* Reset vzhledu tlačítka */
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  transform: none !important;
}
/* Efekt při najetí na křížek */
#replyChipClose:hover {
  color: var(--danger) !important;
  background: rgba(255, 84, 112, 0.1) !important;
  border-radius: 50% !important;
}
/* ========================================= */
/* === V10: FIX SKRÝVÁNÍ ŠTÍTKU === */
/* ========================================= */

/* Tímto přebijeme předchozí nastavení */
.reply-chip[hidden] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Ujistíme se, že křížek má správný kurzor */
#replyChipClose {
  cursor: pointer;
  z-index: 1003; /* Aby byl určitě nad vším */
}
/* ========================================= */
/* === STRÁNKA KONTAKTŮ (CONTACTS LIST) === */
/* ========================================= */

.contact-row {
  display: flex;
  align-items: center;
  gap: 15px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  padding: 15px;
  border-radius: 12px;
  text-decoration: none;
  color: var(--text);
  margin-bottom: 10px;
  transition: transform 0.1s, border-color 0.2s;
}

.contact-row:hover {
  border-color: var(--gold);
  background: rgba(173, 150, 77, 0.05);
  transform: translateX(4px);
}

.c-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), #866c21);
  color: #0b1620;
  font-weight: 700;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

.c-info {
  flex: 1;
  min-width: 0; /* Nutné pro fungování zkracování textu */
}

.c-top {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
}

.c-name {
  font-weight: 700;
  font-size: 1rem;
}

.c-time {
  font-size: 0.75rem;
  color: var(--muted);
}

.c-msg {
  color: var(--muted);
  font-size: 0.9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* Tři tečky u dlouhé zprávy */
}
/* ========================================= */
/* === V13: OPRAVA DOMOVSKÉ STRÁNKY (HOME FIX) === */
/* ========================================= */

/* Oprava hrdinské sekce (Hero) na mobilu */
.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Na PC vedle sebe */
  gap: 20px;
  align-items: center;
}

/* Oprava karet (aby byly hezky v mřížce) */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 15px;
  margin-top: 20px;
}

.card {
  display: block;
  text-decoration: none;
  background: var(--panel-2);
  border: 1px solid var(--line);
  padding: 20px;
  border-radius: 12px;
  color: var(--text);
  transition: transform 0.2s, border-color 0.2s;
}

.card:hover {
  border-color: var(--gold);
  transform: translateY(-3px);
  background: rgba(173, 150, 77, 0.05);
}

/* --- MOBILNÍ OPRAVY PRO HOME --- */
@media (max-width: 900px) {
  
  /* Rozbít mřížku - všechno pod sebe */
  .hero-grid {
    grid-template-columns: 1fr;
    text-align: center; /* Vycentrovat text */
  }

  /* Zarovnat tlačítka na střed */
  .hero-copy .cta-row {
    justify-content: center;
  }
  
  /* Seznam odrážek taky na střed/vlevo, ale v bloku */
  .hero-copy ul {
    display: inline-block;
    text-align: left;
    margin-top: 15px;
  }

  /* Karty přes celou šířku */
  .cards {
    grid-template-columns: 1fr; 
  }

  /* Oprava obrázků, aby neroztahovaly stránku */
  img, svg, video, canvas, audio, iframe, embed, object {
    max-width: 100%;
    height: auto;
  }
  
  /* Hlavička - tlačítka */
  .sitebar .btn {
    flex-grow: 1; /* Tlačítka se roztáhnou, aby vyplnila řádek */
    margin: 0;
  }
}

/* ========================================= */
/* === V14: KLIKACÍ JMÉNA A VIZITKA (VIEW PROFILE) === */
/* ========================================= */

/* Klikatelné jméno v chatu */
.clickable-name {
  cursor: pointer;
  font-weight: 700;
  border-bottom: 1px dotted rgba(173, 150, 77, 0.5);
  transition: color 0.2s;
}
.clickable-name:hover {
  color: var(--gold);
  border-bottom-style: solid;
}

/* Styl pro zobrazení detailů ve vizitce */
.profile-view-row {
  display: flex;
  border-bottom: 1px solid var(--line);
  padding: 10px 0;
}
.profile-view-row:last-child { border-bottom: none; }

.view-label {
  width: 120px;
  font-size: 0.85rem;
  color: var(--muted);
  font-weight: 600;
  flex-shrink: 0;
}
.view-value {
  flex: 1;
  color: var(--text);
  font-weight: 500;
}
/* ========================================= */
/* === V15: FINÁLNÍ OPRAVA MODÁLNÍCH OKEN === */
/* ========================================= */

/* Pozadí okna (musí být skryté a přes celou obrazovku) */
.modal-overlay {
  display: none; /* TOTO JE NEJDŮLEŽITĚJŠÍ - defaultně skryté */
  position: fixed;
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%;
  background: rgba(0, 0, 0, 0.85); /* Tmavé pozadí */
  backdrop-filter: blur(5px);      /* Rozmazání pozadí */
  z-index: 10000;                  /* Úplně nade vším */
  align-items: center; 
  justify-content: center;
  padding: 20px; /* Aby se na mobilu nelepilo ke krajům */
}

/* Samotné okno s obsahem */
.modal-content {
  background: var(--panel);
  border: 1px solid var(--gold);
  border-radius: 16px;
  width: 100%;
  max-width: 450px; /* Maximální šířka */
  max-height: 85vh; /* Aby se vešlo na výšku mobilu */
  overflow-y: auto; /* Scrollování uvnitř okna */
  padding: 20px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.8);
  animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  position: relative;
}

/* Animace vyskočení */
@keyframes popIn {
  from { opacity: 0; transform: scale(0.8); }
  to { opacity: 1; transform: scale(1); }
}

/* Hlavička okna */
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 10px;
  position: sticky;
  top: 0;
  background: var(--panel); /* Aby při scrollování text nelezl přes hlavičku */
  z-index: 5;
}

.modal-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--gold);
}

.close-modal {
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--muted);
  cursor: pointer;
  padding: 5px;
}
/* === OPRAVA CHOVÁNÍ MENU A CHATU (RESPONSIVNÍ) === */

/* 1. DESKTOP (Větší než 900px) - Klasické rozložení vedle sebe */
@media (min-width: 901px) {
  .chat-shell {
    display: flex !important;
    flex-direction: row !important;
    overflow: hidden;
  }

  /* Panel je na PC vždy vidět a má pevnou šířku */
  .chat-shell .side {
    width: 320px !important;
    min-width: 320px !important;
    flex-shrink: 0; /* Nesmí se zmenšit */
    opacity: 1 !important;
    padding: 14px !important;
    border-right: 1px solid var(--line);
    margin: 0 !important;
    display: block !important;
  }

  /* Chat zabere zbytek */
  .chat-shell .pane {
    flex-grow: 1;
    width: auto !important;
  }
}

/* 2. MOBIL (Menší než 900px) - Překryvné menu */
@media (max-width: 900px) {
  .chat-shell {
    position: relative; /* Abychom mohli pozicovat menu */
    display: block !important; /* Prvky pod sebou/přes sebe */
    overflow-x: hidden;
  }

  /* Panel menu na mobilu - defaultně schovaný VLEVO mimo obrazovku */
  .chat-shell .side {
    position: fixed; /* Fixní pozice přes celou obrazovku */
    top: 0; left: 0; bottom: 0;
    width: 85% !important; /* Ne přes celou šířku, ať jde kliknout vedle */
    max-width: 320px;
    background: var(--panel);
    z-index: 5000; /* Hodně vysoko */
    box-shadow: 5px 0 15px rgba(0,0,0,0.5);
    
    /* Animace vysouvání */
    transform: translateX(-110%);
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    
    /* Reset paddingu a marginu */
    margin: 0 !important;
    padding: 15px !important;
    opacity: 1 !important; /* Musí být vidět, když vyjede */
    border: none !important;
  }

  /* KDYŽ JE MENU OTEVŘENÉ (.menu-open) */
  .chat-shell.menu-open .side {
    transform: translateX(0); /* Vyjede na pozici 0 */
  }

  /* Chat zůstane na místě, nikam neuhýbá */
  .chat-shell .pane {
    width: 100% !important;
  }
  
}/* === OPRAVA ROZLIŠENÍ A PŘETÉKÁNÍ (FIX) === */

/* 1. Zabraň vodorovnému posouvání celé stránky */
html, body {
  overflow-x: hidden; /* Odstraní vodorovný posuvník */
  max-width: 100vw;   /* Stránka nebude širší než okno */
}

/* 2. Zkrocení Flexboxu (tohle je ten hlavní lék) */
/* min-width: 0 říká flex prvku: "Můžeš se zmenšit pod velikost svého obsahu" */
.shell, .chat-shell, .pane, .side, #list {
  min-width: 0 !important;
  max-width: 100% !important;
}

/* 3. Zajištění zalamování textu v bublinách */
/* Aby dlouhá slova nebo text neroztahovaly bublinu do nekonečna */
.msg-text {
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}

/* 4. Úprava pro mobily - více místa */
@media (max-width: 600px) {
  /* Zmenšíme odsazení stránky, aby zbylo víc místa pro chat */
  .wrap {
    padding-left: 8px !important;
    padding-right: 8px !important;
    overflow-x: hidden; /* Pojistka */
  }

  /* Bublina zprávy nesmí být širší než 85% okna */
  .msg {
    max-width: 85% !important;
  }
}
/* === FINÁLNÍ VZHLED ZAVÍRACÍHO TLAČÍTKA (Sjednocený 3D styl) === */

#menuCloseBtn {
  /* 1. Reset a základní rozměry */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto !important;    /* Šířka se přizpůsobí, ale... */
  min-width: 44px;           /* ...nebude menší než prst */
  height: 38px;              /* Výška tak akorát k hlavičce */
  margin-left: auto;         /* Zarovnání doprava */
  margin-right: 5px;
  
  /* 2. BARVY A VZHLED (Kopírujeme styl .btn) */
  background: var(--btn-bg) !important; 
  border: 1px solid var(--gold-border) !important;
  color: var(--gold) !important;
  border-radius: 8px !important; /* Stejné zaoblení jako ostatní tlačítka */
  
  /* 3. HLAVNÍ POŽADAVEK: 3D STÍN */
  /* Toto dělá ten efekt "vystouplého" tlačítka */
  box-shadow: 0 3px 0 var(--gold-shadow), 0 4px 6px rgba(0,0,0,0.3) !important;
  
  /* 4. Text a ikona */
  font-size: 1.2rem;
  font-weight: bold;
  line-height: 1;
  transition: all 0.1s ease-out; /* Rychlá odezva na stisk */
  
  /* Pro jistotu, aby ho nic neroztahovalo */
  flex-shrink: 0;
}

/* EFEKT STISKU (Tlačítko se fyzicky zamáčkne) */
#menuCloseBtn:active {
  transform: translateY(3px) !important; /* Posun dolů */
  box-shadow: 0 0 0 var(--gold-shadow), inset 0 2px 4px rgba(0,0,0,0.4) !important; /* Stín zmizí */
  border-color: var(--gold) !important;
}

/* EFEKT HOVER (Rozsvícení - volitelné pro mobily, ale dobré pro tablet) */
#menuCloseBtn:hover {
  background: rgba(173, 150, 77, 0.1) !important;
  color: #ebdcb2 !important;
  border-color: var(--gold) !important;
}

/* Na PC stále skrýváme */
@media (min-width: 901px) {
  #menuCloseBtn {
    display: none !important;
  }
}
/* ========================================= */
/* === VYLEPŠENÍ STRÁNKY NASTAVENÍ (SETTINGS) === */
/* ========================================= */

/* 1. Hlavní kontejner - Flexbox layout */
.settings-layout {
  display: flex;
  gap: 20px;
  align-items: flex-start; /* Aby se sloupce nenatahovaly */
}

/* 2. Levý panel (Navigace) */
.settings-nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 200px;
  flex-shrink: 0;
}

/* Tlačítka v navigaci - vzhled "duchů" (Ghost buttons) */
.settings-nav .nav-item {
  background: transparent !important;
  border: 1px solid transparent !important;
  color: var(--muted) !important;
  box-shadow: none !important;
  justify-content: flex-start !important; /* Text zarovnaný doleva */
  padding: 10px 15px !important;
  font-size: 0.95rem;
  transition: all 0.2s ease;
  border-radius: 8px !important;
}

/* Hover efekt pro navigaci */
.settings-nav .nav-item:hover {
  background: rgba(255, 255, 255, 0.03) !important;
  color: var(--text) !important;
  transform: translateX(4px); /* Jemný posun doprava */
}

/* Aktivní záložka - zlatý proužek vlevo */
.settings-nav .nav-item.active {
  background: rgba(173, 150, 77, 0.1) !important;
  color: var(--gold) !important;
  border-left: 3px solid var(--gold) !important;
  border-radius: 0 8px 8px 0 !important; /* Hranatý vlevo u proužku */
  padding-left: 12px !important; /* Kompenzace za border */
}

/* 3. Pravý panel (Obsah) */
.settings-content.card {
  flex: 1; /* Zabere zbytek místa */
  background: var(--panel-2);
  border: 1px solid var(--line);
  padding: 30px;
  min-height: 400px; /* Aby to nebylo spláclé */
}

/* Skrývání a zobrazování tabů (animace) */
.tab-pane {
  display: none;
  animation: fadeIn 0.3s ease-out;
}
.tab-pane.active {
  display: block;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 4. Vylepšení Avataru v nastavení */
#tab-general #avatar {
  width: 80px !important;    /* Větší než v chatu */
  height: 80px !important;
  font-size: 2.5rem !important;
  border: 2px solid var(--gold); /* Zlatý rámeček */
  box-shadow: 0 0 15px rgba(173, 150, 77, 0.2); /* Zlatá záře */
  margin-bottom: 0;
}

/* Sekce s avatarem a ID */
#tab-general > div:first-of-type {
  background: rgba(0,0,0,0.2); /* Tmavší podklad */
  border-radius: 12px;
  padding: 20px;
  border: 1px dashed var(--line); /* Přerušovaná čára */
}

/* 5. Inputy ve formuláři */
.settings-content label {
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  margin-left: 4px;
  color: var(--gold); /* Zlaté popisky */
  opacity: 0.8;
}

.settings-content textarea {
  background: var(--panel-3);
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: 12px;
  padding: 12px;
  font-family: inherit;
}
.settings-content textarea:focus {
  outline: none;
  border-color: var(--gold);
  background: var(--panel);
}

/* 6. Responsivita pro mobily */
@media (max-width: 700px) {
  .settings-layout {
    flex-direction: column; /* Pod sebe */
  }
  
  .settings-nav {
    flex-direction: row; /* Vedle seba */
    width: 100%;
    overflow-x: auto; /* Scrollování do boku */
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 10px;
  }
  
  .settings-nav .nav-item {
    white-space: nowrap; /* Aby se text nezalamoval */
    border-bottom: 3px solid transparent !important;
    border-left: none !important;
    border-radius: 8px !important;
    justify-content: center !important;
  }
  
  .settings-nav .nav-item.active {
    background: transparent !important;
    border-bottom-color: var(--gold) !important; /* Proužek dole */
    border-radius: 0 !important;
  }
  
  .settings-content.card {
    padding: 20px; /* Menší padding na mobilu */
    border: none;
    background: transparent; /* Splyne s pozadím */
    padding: 0;
  }
}
/* === OBRÁZKY V CHATU === */

/* Obrázek uvnitř bubliny */
.msg-image {
  max-width: 100%;
  border-radius: 8px;
  margin-top: 5px;
  margin-bottom: 5px;
  display: block;
  cursor: pointer; /* Aby šel rozkliknout */
  border: 1px solid rgba(0,0,0,0.2);
}

/* Tlačítko kvality - stavy */
#qualityBtn.hd-active {
  color: var(--gold) !important;
  border-color: var(--gold) !important;
  font-weight: bold;
}

/* Náhled obrázku (čip) - Specifická barva pro obrázky */
/* Tímto vyřešíme prázdný blok a zároveň vyčistíme HTML */
#imagePreviewChip {
  border-left-color: var(--gold) !important; 
}
/* Styl pro PNG odznaky v inventáři */
.inv-icon-img {
  width: 48px;         /* Velikost ikonky */
  height: 48px;
  object-fit: contain; /* Aby se obrázek nedeformoval */
  display: block;      /* Aby byl na samostatném řádku */
  margin: 0 auto 5px auto; /* Vycentrování a mezera pod ním */
  
  /* Volitelné: Jemný stín pod obrázkem, aby "levitoval" */
  filter: drop-shadow(0 4px 3px rgba(0,0,0,0.3));
}

/* Úprava zamčených odznaků (pokud nemají třídu .unlocked) */
.inv-item:not(.unlocked) .inv-icon-img {
  opacity: 0.3;        /* Průhledné */
  filter: grayscale(1); /* Černobílé */
}
/* Profilový obrázek uvnitř kroužku */
#avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ořízne fotku tak, aby vyplnila kruh */
  display: block;
}
/* === FINÁLNÍ KOREKCE ZAROVNÁNÍ (VÁCLAV & OKRAJE) === */

/* 1. Oprava horní lišty (Václav doprava) */
header.sitebar {
  display: flex !important;        /* Aktivuje pružný layout */
  align-items: center !important;  /* Zarovná tlačítka svisle na střed */
  width: 100% !important;          /* Roztáhne lištu přes celou šířku */
  padding: 10px 15px !important;   /* Trochu vzduchu okolo */
  box-sizing: border-box;          /* Aby padding nezvětšoval šířku */
}

/* Tlačítko profilu (poslední v řadě) */
/* V HTML máš style="margin-left:auto", ale toto to pojistí */
header.sitebar .btn:last-child {
  margin-left: auto !important;    /* "Odtlač se ode všeho vlevo" */
}

/* 2. Oprava obsahu "uhýbajícího" doleva na mobilu */
@media (max-width: 700px) {
  
  /* Vrátíme "vzduch" dovnitř karty nastavení */
  .settings-content.card {
     padding: 15px !important; /* Tady byla nula, proto to bylo nalepené */
     width: 100% !important;   /* Jistota */
     box-sizing: border-box;   /* Aby rámeček nepřetekl doprava */
  }

  /* Zarovnáme i hlavní nadpis na střed, vypadá to na mobilu líp */
  h1 {
    text-align: center;
    margin-top: 10px;
  }
  
  /* Ošetření, aby inventář nebyl širší než displej */
  .inventory-grid {
    padding: 0 5px; /* Malá mezera po stranách */
  }
}
/* ========================================= */
/* === ZÁCHRANA PRO DESKTOP (PC) === */
/* ========================================= */

@media (min-width: 901px) {
  
  /* 1. Vycentrování hlavního obsahu (aby nebyl nalepený vlevo) */
  .shell {
    max-width: 1000px !important; /* Maximální šířka, aby se to nerozteklo */
    margin: 40px auto !important; /* 'auto' zajistí vycentrování na střed */
    width: 100%;
    display: block !important;    /* Rušíme případné flex-col z mobilu */
  }

  /* 2. Nastavení profilu - hezky vedle sebe */
  .settings-layout {
    display: flex !important;
    flex-direction: row !important; /* Sloupce vedle sebe */
    align-items: flex-start;
  }

  /* 3. Hlavička (Menu) - aby nebyla roztažená přes celý ultra-wide monitor */
  /* Pokud chceš, aby tlačítka byla uprostřed stránky a ne v rozích */
  header.sitebar {
    max-width: 1000px !important;
    margin: 0 auto !important; /* Vycentrovat lištu */
    width: 100%;
    border-radius: 0 0 12px 12px; /* Hezčí, když to není přes celou šířku */
    justify-content: flex-start !important; /* Tlačítka zleva */
  }
  
  /* Tlačítko profilu na PC zarovnáme doprava v rámci toho 1000px bloku */
  header.sitebar .btn:last-child {
    margin-left: auto !important;
  }
  
  /* 4. Oprava karty nastavení na PC */
  .settings-content.card {
     width: auto !important;
     flex: 1; /* Zabere zbytek místa vedle menu */
  }
}
/* === OPRAVA ZAROVNÁNÍ ZPRÁV (FLEXBOX) === */

/* Kontejner zpráv musí vědět, že prvky řadí pod sebe */
#list {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px;
  width: 100%;
}

/* Cizí zprávy (vlevo) */
.msg {
  align-self: flex-start !important; /* Přilepit vlevo */
  margin-right: auto !important;     /* Odtlačit zprava */
  background: var(--panel);
  max-width: 85%;
}

/* Moje zprávy (vpravo) */
.msg.mine {
  align-self: flex-end !important;
  margin-left: auto !important;
  margin-right: 0 !important;
  background: var(--bubble-me) !important;
    color: var(--text);
}
/* Ocásky bublin */
.msg::after {
  content: ""; position: absolute; bottom: -1px; width: 10px; height: 10px;
  background: inherit; border-left: 1px solid var(--line); border-bottom: 1px solid var(--line);
  transform: rotate(45deg);
}
.msg:not(.mine)::after { left: 8px; right: auto; }
.msg.mine::after { right: 8px; left: auto; }
/* ========================================= */
/* === ZÁCHRANA PRO DESKTOP (PC) === */
/* ========================================= */

@media (min-width: 901px) {
  
  /* 1. OBECNÉ NASTAVENÍ (Pro Home, Settings...) - Úzká nudle uprostřed */
  .shell {
    max-width: 1000px !important; 
    margin: 40px auto !important; 
    width: 100%;
    display: block !important;    
  }

  /* 2. VÝJIMKA PRO CHAT (Pro chat.html) - Roztažené na plno */
  .shell.chat-shell {
    max-width: 100% !important;    /* Roztáhnout na celou šířku */
    margin: 0 !important;          /* Žádná mezera nahoře */
    display: flex !important;      /* Vrátit layout vedle sebe */
    flex-direction: row !important;
    height: calc(100vh - 80px);    /* Roztáhnout na výšku okna */
  }

  /* Hlavička u chatu taky musí být široká */
  body:has(.chat-shell) header.sitebar { 
      max-width: 100% !important;
      border-radius: 0 !important;
  }

  /* Nastavení profilu - sloupce vedle sebe */
  .settings-layout {
    display: flex !important;
    flex-direction: row !important; 
    align-items: flex-start;
  }

  /* Tlačítko profilu doprava */
  header.sitebar .btn:last-child {
    margin-left: auto !important;
  }
}
/* ========================================= */
/* === FINÁLNÍ OPRAVA ZMIZELÉHO PANELU === */
/* ========================================= */

@media (min-width: 901px) {
  /* Na PC musí být boční panel vždy vidět! */
  .chat-shell .side {
    width: 320px !important;       /* Pevná šířka */
    min-width: 320px !important;
    opacity: 1 !important;         /* Viditelnost */
    padding: 14px !important;      /* Polstrování */
    margin-right: 16px !important; /* Mezera od chatu */
    border: 1px solid var(--line) !important;
    display: block !important;
  }
  
  /* Ujistíme se, že chat zabere zbytek */
  .chat-shell .pane {
    display: flex !important;
    flex-direction: column;
    width: 100%;
  }
}
/* === PŘIPNUTÉ ODZNAKY === */

/* 1. Odznak u avatara (v chatu i v nastavení) */
.avatar-container {
  position: relative;
  display: inline-block; /* Aby obalil fotku */
}

.avatar-badge-icon {
  position: absolute;
  bottom: -2px;    /* Umístění vpravo dole */
  right: -5px;
  width: 24px;     /* Velikost odznáčku */
  height: 24px;
  background: var(--panel); /* Podklad, aby nesplýval */
  border-radius: 50%;
  padding: 2px;
  border: 1px solid var(--gold);
  box-shadow: 0 2px 5px rgba(0,0,0,0.5);
  z-index: 10;
}

/* Větší verze pro Vizitku a Nastavení (velká fotka) */
.avatar-container.large .avatar-badge-icon {
  width: 40px;
  height: 40px;
  bottom: 5px;
  right: 5px;
}

/* 2. Odznaky na vizitce (řada 3 vedle sebe) */
.profile-badges-row {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 10px 0 20px 0;
  min-height: 40px; /* Aby to neskákalo, když je prázdno */
}

.profile-badge-item {
  width: 40px;
  height: 40px;
  object-fit: contain;
  filter: drop-shadow(0 4px 2px rgba(0,0,0,0.3));
  transition: transform 0.2s;
}
.profile-badge-item:hover { transform: scale(1.2); }

/* 3. Vizuální označení v Nastavení (co je vybráno) */
.inv-item.selected-avatar { border-color: var(--accent-2); box-shadow: 0 0 15px rgba(18, 211, 154, 0.3); }
.inv-item.selected-profile { border-color: var(--accent); box-shadow: 0 0 15px rgba(46, 168, 255, 0.3); }

/* === NOTIFIKAČNÍ CENTRUM === */

/* Zvoneček v hlavičce */
.notif-btn {
  position: relative;
  font-size: 1.2rem;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 10px !important;
  color: var(--gold) !important;
}

/* Červená tečka */
.notif-badge {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 10px;
  height: 10px;
  background: var(--danger);
  border-radius: 50%;
  border: 2px solid var(--panel);
  display: none; /* Defaultně skryto */
}
.notif-badge.active { display: block; }

/* Panel notifikací (Pod zvonečkem) */
.notif-panel {
  display: none;
  position: absolute;
  top: 60px;
  right: 10px;
  width: 300px;
  max-height: 400px;
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--gold);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  z-index: 5000;
  padding: 10px;
}

/* Položka notifikace */
.notif-item {
  background: var(--panel-2);
  border-bottom: 1px solid var(--line);
  padding: 10px;
  border-radius: 8px;
  margin-bottom: 5px;
  font-size: 0.9rem;
}
.notif-item:last-child { margin-bottom: 0; }

.notif-actions {
  display: flex;
  gap: 5px;
  margin-top: 8px;
}

.notif-time {
  font-size: 0.7rem;
  color: var(--muted);
  float: right;
}
/* Nahrávání hlasovky */
#micBtn.recording {
  color: var(--danger) !important;
  border-color: var(--danger) !important;
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 84, 112, 0.4); }
  70% { box-shadow: 0 0 0 10px rgba(255, 84, 112, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 84, 112, 0); }
}

/* Přehrávač audia v bublině */
.msg-audio {
  width: 200px;
  height: 40px;
  margin-top: 5px;
  border-radius: 20px;
  /* Prohlížeče si audio stylují po svém, ale omezíme šířku */
}

/* Odkaz na soubor v bublině */
.msg-file {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(0,0,0,0.2);
  padding: 10px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--text);
  margin-top: 5px;
  border: 1px solid var(--line);
  transition: background 0.2s;
}
.msg-file:hover {
  background: rgba(255,255,255,0.05);
}
.file-icon { font-size: 1.5rem; }
.file-name { font-weight: 600; font-size: 0.9rem; word-break: break-all; }
/* Tlačítko pro stažení (přes obrázek) */
.download-btn {
  position: absolute;
  bottom: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.3);
  font-size: 1.1rem;
  transition: all 0.2s;
  backdrop-filter: blur(2px);
  z-index: 5;
}

.download-btn:hover {
  background: var(--gold);
  color: #000;
  border-color: var(--gold);
  transform: scale(1.1);
}

/* Obal pro obrázek, aby šlo tlačítko pozicovat */
.img-wrapper {
  position: relative;
  display: inline-block;
  max-width: 100%;
}
/* ========================================= */
/* === OPRAVA PSANÍ NA MOBILU (Větší Input) === */
/* ========================================= */

@media (max-width: 600px) {
  
  /* 1. Zmenšíme mezery a okraje lišty */
  .pane .composer {
    gap: 6px !important;       /* Menší mezery mezi prvky */
    padding: 10px !important;  /* Menší okraje okolo */
  }

  /* 2. Změna tlačítka "Poslat" na ikonku */
  #send {
    font-size: 0 !important;       /* Skryjeme text "Poslat" */
    width: 42px !important;        /* Pevná šířka */
    min-width: 42px !important;    /* Aby se nesmrsklo */
    height: 42px !important;       /* Pevná výška */
    padding: 0 !important;         /* Žádné zbytečné vycpávky */
    border-radius: 50% !important; /* Uděláme z něj kroužek */
    display: flex !important;
    align-items: center;
    justify-content: center;
  }

  /* Vložíme šipku místo textu */
  #send::after {
    content: "➤";                 /* Ikonka šipky */
    font-size: 1.2rem;             /* Velikost ikonky */
    color: #000;                   /* Černá barva (protože pozadí je zlaté) */
    margin-left: 2px;              /* Jemné optické vycentrování */
  }

  /* 3. Trochu zmenšíme i tlačítka pro přílohy */
  #attachBtn, #micBtn {
    padding: 0 8px !important;     /* Užší tlačítka */
    font-size: 1.2rem !important;
  }
}
/* Animace pro nápis "píše..." */
.typing-anim {
  color: var(--accent-2) !important; /* Zelenkavá barva */
  font-style: italic;
  font-size: 0.8rem;
  animation: typingPulse 1.5s infinite;
}

@keyframes typingPulse {
  0% { opacity: 0.5; }
  50% { opacity: 1; }
  100% { opacity: 0.5; }
}
/* === INDIKÁTOR PSANÍ (Dole nad inputem) === */

/* Pozicování kontejneru */
.typing-status {
  position: absolute;
  top: -25px;       /* Vysune se 25px nad lištu */
  left: 20px;       /* Odsazení zleva */
  height: 20px;
  display: flex;
  align-items: center;
  pointer-events: none; /* Aby přes to šlo klikat na zprávy pod tím */
  z-index: 10;
}

/* Samotná animace textu (navazujeme na to, co už máš) */
.typing-anim {
  color: var(--accent-2) !important; /* Zelenkavá */
  font-size: 0.85rem;
  font-weight: 600;
  font-style: italic;
  text-shadow: 0 1px 2px rgba(0,0,0,0.8); /* Aby byl čitelný i na textu zprávy */
}
/* === ONLINE TEČKA (Musí tam zůstat) === */
.online-dot {
  position: absolute;
  bottom: 0; right: 0;
  width: 14px; height: 14px;
  background-color: #12d39a;
  border: 2px solid var(--panel);
  border-radius: 50%;
  z-index: 20;
  animation: pulse-green 2s infinite;
}
@keyframes pulse-green {
  0% { box-shadow: 0 0 0 0 rgba(18, 211, 154, 0.4); }
  70% { box-shadow: 0 0 0 6px rgba(18, 211, 154, 0); }
  100% { box-shadow: 0 0 0 0 rgba(18, 211, 154, 0); }
}
.avatar-wrap {
  position: relative;
  display: inline-block;
  line-height: 0;
}
/* === REAKCE NA ZPRÁVY === */

/* Kontejner pro zprávu, aby šlo pozicovat tlačítko */
.msg {
  position: relative; /* Nutné! */
}

/* Tlačítko pro přidání reakce (Smiley) */
.react-btn-trigger {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.2rem;
  cursor: pointer;
  opacity: 0; /* Normálně neviditelné */
  transition: opacity 0.2s;
  padding: 5px;
  filter: grayscale(1);
}

/* Na PC se ukáže při najetí myší */
.msg:hover .react-btn-trigger { opacity: 0.5; }
.react-btn-trigger:hover { opacity: 1; filter: grayscale(0); transform: translateY(-50%) scale(1.2); }

/* Pozice tlačítka podle toho, čí je to zpráva */
.msg.mine .react-btn-trigger { left: -30px; }
.msg:not(.mine) .react-btn-trigger { right: -30px; }

/* Seznam existujících reakcí pod zprávou */
.reactions-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
  justify-content: flex-end; /* Moje zprávy vpravo */
}
.msg:not(.mine) .reactions-list { justify-content: flex-start; /* Cizí vlevo */ }

/* Jedna bublinka s reakcí (např. ❤️ 1) */
.reaction-pill {
  background: var(--panel-3);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 2px 6px;
  font-size: 0.75rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  transition: all 0.2s;
}

.reaction-pill:hover { border-color: var(--gold); }
/* Pokud jsem já reagoval, zvýrazníme to */
.reaction-pill.active {
  background: rgba(173, 150, 77, 0.2);
  border-color: var(--gold);
}

.emoji-picker {
  display: none;
  position: fixed !important; /* DŮLEŽITÉ: Musí být fixed, aby se nepočítalo od zprávy */
  top: 0;
  left: 0;
  background: var(--panel-2);
  border: 1px solid var(--gold);
  padding: 8px;
  border-radius: 30px;
  gap: 8px;
  box-shadow: 0 5px 20px rgba(0,0,0,0.6);
  z-index: 9999; /* Musí být nade vším */
  white-space: nowrap;
}

.emoji-picker.show {
  display: flex;
  animation: popIn 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.emoji-option {
  font-size: 1.5rem;
  cursor: pointer;
  transition: transform 0.2s;
  padding: 0 2px;
}
.emoji-option:hover { transform: scale(1.4); }

/* Na mobilu tlačítko trigger zobrazíme stále (nebo při kliku) */
@media (max-width: 900px) {
  .react-btn-trigger { opacity: 0.3; } /* Jemně viditelné */
  .msg.mine .react-btn-trigger { left: -25px; }
  .msg:not(.mine) .react-btn-trigger { right: -25px; }
}
/* Reakce */
.react-btn-trigger { position: absolute; top: 50%; transform: translateY(-50%); font-size: 1.2rem; cursor: pointer; opacity: 0; padding: 5px; transition: opacity 0.2s; }
.msg:hover .react-btn-trigger { opacity: 0.5; }
.msg.mine .react-btn-trigger { left: -30px; }
.msg:not(.mine) .react-btn-trigger { right: -30px; }

.reactions-list { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; justify-content: flex-end; }
.msg:not(.mine) .reactions-list { justify-content: flex-start; }
.reaction-pill { background: var(--panel-3); border: 1px solid var(--line); border-radius: 12px; padding: 2px 6px; font-size: 0.75rem; cursor: pointer; display: inline-flex; gap: 3px; }
.reaction-pill.active { border-color: var(--gold); background: rgba(173, 150, 77, 0.2); }

.emoji-picker { display: none; position: absolute; background: var(--panel-2); border: 1px solid var(--gold); padding: 5px; border-radius: 20px; gap: 5px; z-index: 100; }
.emoji-picker.show { display: flex; }
.emoji-option { font-size: 1.5rem; cursor: pointer; padding: 0 2px; }

/* Online Tečka */
.online-dot { position: absolute; bottom: 0; right: 0; width: 14px; height: 14px; background-color: #12d39a; border: 2px solid var(--panel); border-radius: 50%; z-index: 20; animation: pulse-green 2s infinite; }
@keyframes pulse-green { 0% { box-shadow: 0 0 0 0 rgba(18, 211, 154, 0.4); } 70% { box-shadow: 0 0 0 6px rgba(18, 211, 154, 0); } 100% { box-shadow: 0 0 0 0 rgba(18, 211, 154, 0); } }
.avatar-wrap { position: relative; display: inline-block; line-height: 0; }
/* === STYLY PRO VYHLEDÁVÁNÍ V HLAVIČCE === */
.search-group {
  order: 2; /* Na PC bude uprostřed/vpravo */
}

@media (max-width: 700px) {
  /* Na mobilu logo vlevo, menu vpravo, hledání pod tím */
  header.sitebar {
    justify-content: space-between;
  }
  
  .search-group {
    order: 3; /* Hodíme to až na konec (nový řádek) */
    width: 100%;
    margin-top: 10px;
  }
  
  .search-group input {
    flex-grow: 1; /* Input se roztáhne */
  }
}
/* === ROZBALOVACÍ MENU V HLAVIČCE === */
.dropdown-content {
  display: none; /* Schované */
  position: absolute;
  top: 120%; /* Kousek pod tlačítkem */
  left: 0;
  background-color: var(--panel);
  min-width: 200px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.7);
  border: 1px solid var(--gold-border);
  border-radius: 8px;
  z-index: 2000; /* Musí být nad příspěvky */
  overflow: hidden;
  animation: fadeIn 0.2s ease;
}

/* Třída pro zobrazení (přidává JS) */
.dropdown-content.show {
  display: block;
}

/* Odkazy v menu */
.dropdown-content a {
  color: var(--text);
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  border-bottom: 1px solid var(--line);
  transition: background 0.2s;
}

.dropdown-content a:last-child {
  border-bottom: none;
}

.dropdown-content a:hover {
  background-color: var(--panel-2);
  color: var(--gold);
  padding-left: 20px; /* Efekt posunu při najetí */
}

.dropdown-content a.active {
  background-color: rgba(173, 150, 77, 0.1);
  color: var(--gold);
  border-left: 3px solid var(--gold);
}

/* Úprava vyhledávání pro mobily */
@media (max-width: 600px) {
  .sitebar {
    gap: 10px;
    padding: 10px;
  }
  
  /* Na malém mobilu schováme nápis Safe Zone, aby bylo místo pro hledání */
  /* Nebo ho jen zmenšíme: */
  .sitebar > div:nth-child(2) {
     display: none; 
  }
  
  #searchFilter {
     max-width: 80px; /* Zmenšit select */
  }
}
/* === KOMPLEXNÍ FILTR PŘÍSPĚVKŮ === */

/* Kontejner pro tlačítko a menu */
.post-settings-container {
  position: relative;
  display: inline-block;
}

/* Tlačítko pro otevření nastavení */
.settings-trigger-btn {
  background: var(--panel-3);
  border: 1px solid var(--line);
  color: var(--gold);
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  transition: all 0.2s;
}
.settings-trigger-btn:hover { border-color: var(--gold); }

/* Samotné rozbalovací okno */
.settings-dropdown-menu {
  display: none; /* Skryté */
  position: absolute;
  top: 100%; /* Vybalí se pod tlačítko */
  left: 0;
  width: 320px; /* Širší, aby se vešly popisky */
  background: var(--panel);
  border: 1px solid var(--gold);
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.6);
  z-index: 1000;
  padding: 15px;
  margin-top: 8px;
  color: var(--text);
}
.settings-dropdown-menu.show { display: block; animation: fadeIn 0.2s; }

/* Nadpisy sekcí (S kým, Kde, Jak dlouho) */
.settings-section-title {
  color: var(--gold);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px;
  margin-top: 15px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 4px;
}
.settings-section-title:first-child { margin-top: 0; }

/* Řádek v menu (Text vlevo - Input vpravo) */
.settings-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  font-size: 0.9rem;
}

/* Styl pro čtvereček (zaklikávátko) */
/* Používáme radio input, ale vypadá to čistě */
.settings-radio {
  accent-color: var(--gold); /* Zlatá barva zaškrtnutí */
  width: 18px;
  height: 18px;
  cursor: pointer;
}

/* Malé inputy pro čísla (km, dny) */
.mini-input {
  background: var(--panel-3);
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: 4px;
  width: 60px;
  padding: 2px 5px;
  margin-left: 10px;
  font-size: 0.85rem;
  display: none; /* Defaultně skryté */
}

/* Když je radio zaškrtnuté, zobrazíme sousední input (pokud tam je) */
.settings-radio:checked ~ .mini-input {
  display: inline-block;
  border-color: var(--gold);
}
/* Styl pro čtvereček (checkbox) */
.settings-radio {
  accent-color: var(--gold);
  width: 18px;
  height: 18px;
  cursor: pointer;
  margin: 0; /* Reset marginu */
}

/* Inputy v menu */
.settings-dropdown-menu .msg-input {
  background: var(--panel-3);
  border: 1px solid var(--line);
  color: var(--text);
  font-size: 0.85rem;
  border-radius: 4px;
}
/* === OPRAVA HLAVIČKY (ZAROVNÁNÍ PROFILU) === */
header.sitebar {
  justify-content: space-between !important; /* Rozhodí prvky do krajů (Vlevo / Vpravo) */
}

/* Pojistka: Pravá část (Profil + Zvonek) se odtlačí doprava */
header.sitebar > div:last-child {
  margin-left: auto !important;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Oprava pro mobil, aby se to nezmáčklo */
@media (max-width: 600px) {
  header.sitebar {
    gap: 10px;
  }
  
  /* Na malém mobilu schováme nápis "Profil" a necháme jen ikonu, ušetří to místo */
  #topBarName {
    display: none;
  }
}
/* === FINÁLNÍ OPRAVA ZOBRAZENÍ NA MOBILU (FULL WIDTH) === */
@media (max-width: 768px) {
  
  /* 1. Odstraníme odsazení hlavního obalu */
  .wrap {
    padding: 0 !important;       /* Žádné mezery po stranách */
    max-width: 100vw !important; /* Maximálně šířka okna */
    overflow-x: hidden;          /* Zabrání posouvání do boku */
  }

  /* 2. Roztáhneme obsah na 100% */
  .shell, .chat-shell {
    width: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important; /* Na mobilu nevypadají kulaté rohy v rozích dobře */
  }

  /* 3. Hlavička přes celou šířku */
  header.sitebar {
    width: 100% !important;
    border-radius: 0 !important; /* Hranatá hlavička, aby lícovala s displejem */
    padding-left: 10px !important;
    padding-right: 10px !important;
    margin: 0 !important;
  }

  /* 4. Chatovací okno */
  .pane, #list {
    width: 100% !important;
  }
  
  /* 5. Lišta pro psaní (Composer) */
  .pane .composer {
    padding-left: 10px !important;
    padding-right: 10px !important;
    width: 100% !important;
  }
}
/* === FIX: SCROLLOVÁNÍ V BOČNÍM MENU NA MOBILU === */
@media (max-width: 900px) {
  .chat-shell.menu-open .side {
    /* 1. Roztáhnout na celou dynamickou výšku (řeší lišty prohlížeče) */
    height: 100vh !important;       /* Fallback */
    height: 100dvh !important;      /* Dynamic Viewport Height (pro moderní mobily) */
    
    /* 2. Povolit svislé posouvání UVNITŘ panelu */
    overflow-y: auto !important;
    
    /* 3. Přidat prostor dole, aby poslední tlačítko nebylo nalepené na hraně */
    padding-bottom: 80px !important; 
    
    /* Pojistka pro správné vykreslení */
    box-sizing: border-box !important;
  }
}
/* ========================================= */
/* === OPRAVA ZDI (WALL) PRO MOBILY === */
/* ========================================= */

@media (max-width: 600px) {
  
  /* 1. Oprava tlačítek u psaní příspěvku */
  /* Najdeme ten flex kontejner, kde jsou tlačítka */
  .feed-post > div:last-child {
    flex-wrap: wrap !important; /* Povolíme zalamování */
    gap: 10px !important;
  }

  /* Tlačítka roztáhneme na plnou šířku */
  .settings-trigger-btn, 
  .feed-post button[onclick="createPost()"] {
    width: 100% !important;
    justify-content: center !important;
    margin: 0 !important;
  }
  
  /* Kontejner pro nastavení taky na 100% */
  .post-settings-container {
    width: 100% !important;
  }

  /* 2. Oprava příliš širokého menu (to je ten hlavní problém!) */
  /* Přebijeme to style="width:340px" z HTML */
  #postSettingsMenu.settings-dropdown-menu {
    width: 100% !important; /* Roztáhnout na šířku kontejneru */
    max-width: 90vw !important; /* Ale ne víc než šířka okna */
    left: 0 !important;
    right: auto !important;
    box-sizing: border-box !important;
  }
  
  /* Zmenšíme inputy uvnitř menu, aby nepřečuhovaly */
  .settings-dropdown-menu input[type="text"],
  .settings-dropdown-menu input[type="number"] {
    max-width: 100px !important; /* Omezíme šířku políček */
  }

  /* 3. Oprava záložek (Tabs) */
  .wall-tabs-container {
    margin-left: -10px; /* Kompenzace paddingu .wrapu, aby šly až ke kraji */
    margin-right: -10px;
    padding-left: 10px;
    width: calc(100% + 20px);
  }
}
/* === UPRAVENÁ HLAVIČKA NA ZDI (Sjednocený "pilulkový" vzhled) === */
.search-group input, 
.search-group select, 
.search-group button {
  height: 36px !important; /* Stejná výška pro všechno */
  border-radius: 18px !important; /* Všechno hezky kulaté */
  font-size: 0.85rem !important;
  border: 1px solid var(--line) !important;
  background: var(--panel-2) !important;
  color: var(--text) !important;
  box-shadow: none !important; /* Žádné 3D stíny, ať je to čisté a ploché */
  margin: 0 !important;
}

/* Specifická úprava pro Lupu (jen ikona) */
.search-group button {
  width: 36px !important; /* Čtverec/Kruh */
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--gold) !important; /* Zlatá lupa */
  color: #000 !important;
  border: none !important;
  min-width: 36px !important; /* Aby se nesmrskla */
}

/* === KOMPAKTNÍ TLAČÍTKA U PŘÍSPĚVKU === */
.composer-footer {
  display: flex;
  align-items: center;
  justify-content: space-between; /* Roztáhnout do krajů (Vlevo zábava / Vpravo akce) */
  margin-top: 10px;
}

.composer-right {
  display: flex;
  align-items: center;
  gap: 8px; /* Mezera mezi Nastavením a Zveřejnit */
}

/* Zmenšení tlačítek (Compact) */
.btn-compact {
  padding: 4px 12px !important;
  font-size: 0.8rem !important;
  height: 32px !important;
  border-radius: 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
}

/* Na mobilu schováme text u tlačítka nastavení, necháme jen ozubené kolo */
@media (max-width: 450px) {
  .hide-mobile { display: none !important; }
}

/* === PIŠKVORKY (TIC-TAC-TOE) === */
.game-bubble-ttt {
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--gold);
  border-radius: 12px;
  padding: 10px;
  display: inline-block;
  margin-top: 5px;
  margin-bottom: 5px;
  min-width: 180px;
}

.game-header {
  text-align: center;
  font-weight: bold;
  color: var(--gold);
  margin-bottom: 8px;
  font-size: 0.8rem;
  letter-spacing: 1px;
}

/* Mřížka 3x3 */
.ttt-board {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  background: var(--line); /* Barva mřížky */
  padding: 4px;
  border-radius: 8px;
  width: 160px;
  height: 160px;
  margin: 0 auto;
}

.ttt-cell {
  background: var(--panel-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: bold;
  cursor: default;
  border-radius: 4px;
  user-select: none;
}

/* Barvy symbolů */
.cell-x { color: var(--accent-2); text-shadow: 0 0 5px rgba(18, 211, 154, 0.5); }
.cell-o { color: var(--danger); text-shadow: 0 0 5px rgba(255, 84, 112, 0.5); }

/* Aktivní buňka (když jsem na tahu) */
.cell-active {
  cursor: pointer;
  background: var(--panel-3);
}
.cell-active:hover {
  background: var(--gold-border);
}

.game-footer {
  margin-top: 8px;
  text-align: center;
  font-size: 0.75rem;
  color: var(--muted);
}
/* === MINI TAMAGOČI V HLAVIČCE === */

.tama-container {
  position: relative;
  width: 42px;
  height: 32px;
  margin-left: 8px;
  display: none;              /* default schovaný */
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;       /* ať neblokuje klikání na lištu */
}

.tama-pet {
  font-size: 1.6rem;
  line-height: 1;
  filter: drop-shadow(0 0 4px rgba(0,0,0,0.7));
  animation: tama-walk 7s ease-in-out infinite;
  transform-origin: center bottom;
}

/* jednoduchá „procházka“ sem a tam + otočka */
@keyframes tama-walk {
  0%   { transform: translateX(-12px) scaleX(1); }
  40%  { transform: translateX(12px) scaleX(1); }
  50%  { transform: translateX(12px) scaleX(-1); }   /* otočí se */
  90%  { transform: translateX(-12px) scaleX(-1); }
  100% { transform: translateX(-12px) scaleX(-1); }
}

/* když má html classu .has-pet, mazlík je aktivní */
.has-pet .tama-container {
  display: flex;
}

@media (max-width: 600px) {
  .tama-container {
    width: 32px;
    height: 26px;
  }
  .tama-pet {
    font-size: 1.4rem;
  }
}
/* === MINI TAMAGOČI ZAŘÍZENÍ V HLAVIČCE === */

.pet-shell {
  position: relative;
  width: 60px;
  height: 40px;
  border-radius: 999px;
  background: radial-gradient(circle at 25% 20%, rgba(255,255,255,0.18), var(--panel-3));
  border: 2px solid rgba(0,0,0,0.85);
  box-shadow: 0 4px 10px rgba(0,0,0,0.8);
  margin-left: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pet-shell::before {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: inherit;
  border: 1px solid rgba(255,255,255,0.08);
  pointer-events: none;
}

.pet-screen {
  width: 72%;
  height: 70%;
  background: radial-gradient(circle at 50% 15%, rgba(255,255,255,0.10), rgba(0,0,0,0.95));
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,0.85);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: visible;
}

/* samotná potvora */
.pet-body {
  position: relative;
  width: 20px;
  height: 20px;
  border-radius: 50% 50% 45% 45%;
  background: linear-gradient(to bottom, #fde68a, #fbbf24); /* smaženáček vibe */
  box-shadow: 0 0 4px rgba(0,0,0,0.8);
}

.pet-eye {
  position: absolute;
  top: 6px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #0f172a;
  box-shadow: 0 0 1px rgba(0,0,0,0.9);
}

.pet-eye-left { left: 5px; }
.pet-eye-right { right: 5px; }

.pet-mouth {
  position: absolute;
  bottom: 4px;
  left: 50%;
  width: 8px;
  height: 4px;
  margin-left: -4px;
  border-radius: 0 0 8px 8px;
  border-bottom: 2px solid #111827;
}

/* malé diody dole na "vajíčku" */
.pet-led {
  position: absolute;
  bottom: 6px;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: rgba(0,0,0,0.65);
}

.pet-led-left { left: 12px; }
.pet-led-right { right: 12px; }

/* Stavové animace */
.pet-shell.pet--idle .pet-body {
  animation: pet-bob 2.4s ease-in-out infinite;
}

.pet-shell.pet--alert .pet-body {
  animation: pet-alert 0.6s ease-in-out infinite;
}

.pet-shell.pet--sleep .pet-body {
  animation: pet-sleep 3s ease-in-out infinite;
  opacity: 0.85;
}

.pet-shell.pet--sleep .pet-eye {
  height: 1px;
  top: 8px;
}

.pet-shell.pet--sleep::after {
  content: "z";
  position: absolute;
  top: 4px;
  right: 8px;
  font-size: 0.55rem;
  color: rgba(255,255,255,0.7);
  text-transform: uppercase;
  animation: pet-zzz 3s ease-in-out infinite;
}

/* LED reagující na notifikace */
.pet-shell.pet--alert .pet-led-right {
  background: #fbbf24;
  box-shadow: 0 0 6px rgba(251,191,36,0.95);
}

/* Keyframes */
@keyframes pet-bob {
  0% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
  100% { transform: translateY(0); }
}

@keyframes pet-alert {
  0%, 100% { transform: translateY(0) scale(1); }
  40% { transform: translateY(-4px) scale(1.05); }
  70% { transform: translateY(-1px) scale(0.98); }
}

@keyframes pet-sleep {
  0%, 100% { transform: translateY(1px); }
  50% { transform: translateY(3px); }
}

@keyframes pet-zzz {
  0% { opacity: 0; transform: translate(0, 4px); }
  40% { opacity: 1; transform: translate(1px, 0); }
  100% { opacity: 0; transform: translate(2px, -4px); }
}

@media (max-width: 600px) {
  .pet-shell {
    width: 46px;
    height: 32px;
    margin-left: 6px;
  }
  .pet-screen {
    border-radius: 12px;
  }
  .pet-body {
    width: 16px;
    height: 16px;
  }
}
/* === MINI MAZLÍK V HORNÍ LIŠTĚ (TAMAGOČI LIGHT) === */

.pet-shell {
  position: relative;
  width: 60px;
  height: 40px;
  border-radius: 999px;
  background: radial-gradient(circle at 25% 20%, rgba(255,255,255,0.18), var(--panel-3));
  border: 2px solid rgba(0,0,0,0.85);
  box-shadow: 0 4px 10px rgba(0,0,0,0.8);
  margin-left: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pet-shell.hidden {
  display: none;
}

.pet-screen {
  width: 72%;
  height: 70%;
  background: radial-gradient(circle at 50% 15%, rgba(255,255,255,0.10), rgba(0,0,0,0.95));
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,0.85);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: visible;
}

.pet-body {
  position: relative;
  width: 20px;
  height: 20px;
  border-radius: 50% 50% 45% 45%;
  box-shadow: 0 0 4px rgba(0,0,0,0.8);
}

/* Oči + pusa */
.pet-eye {
  position: absolute;
  top: 6px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #0f172a;
  box-shadow: 0 0 1px rgba(0,0,0,0.9);
}
.pet-eye-left  { left: 5px; }
.pet-eye-right { right: 5px; }

.pet-mouth {
  position: absolute;
  bottom: 4px;
  left: 50%;
  width: 8px;
  height: 4px;
  margin-left: -4px;
  border-radius: 0 0 8px 8px;
  border-bottom: 2px solid #111827;
}

/* Diody */
.pet-led {
  position: absolute;
  bottom: 6px;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: rgba(0,0,0,0.65);
}
.pet-led-left  { left: 12px; }
.pet-led-right { right: 12px; }

/* Typ mazlíka podle data-pet */
.pet-shell[data-pet="egg"] .pet-body {
  background: linear-gradient(to bottom, #fde68a, #fbbf24);
}

.pet-shell[data-pet="glitch"] .pet-body {
  background: linear-gradient(135deg, #8b5cf6, #22d3ee);
  border-radius: 4px;
}

/* Noční kočka – aby byla vidět i na dark motivu */
.pet-shell[data-pet="cat"] .pet-body {
  background: radial-gradient(circle at 30% 25%, #e5e7eb 0, #111827 40%, #020617 100%);
  box-shadow:
    0 0 0 1px rgba(148,163,184,0.9),
    0 0 6px rgba(148,163,184,0.6);
}

/* uši, lehce světlejší než tělo */
.pet-shell[data-pet="cat"] .pet-body::before,
.pet-shell[data-pet="cat"] .pet-body::after {
  content: "";
  position: absolute;
  top: -4px;
  width: 7px;
  height: 7px;
  background: #111827;
  border-radius: 2px 2px 0 0;
  box-shadow: 0 0 0 1px rgba(148,163,184,0.5);
}
.pet-shell[data-pet="cat"] .pet-body::before {
  left: 3px;
  transform: rotate(-10deg);
}
.pet-shell[data-pet="cat"] .pet-body::after {
  right: 3px;
  transform: rotate(10deg);
}

/* oči – kočičí reflektory */
.pet-shell[data-pet="cat"] .pet-eye {
  background: #facc15;
  box-shadow: 0 0 5px rgba(250,204,21,0.9);
}

/* pusa trochu světlejší, ať se neztratí */
.pet-shell[data-pet="cat"] .pet-mouth {
  border-bottom-color: #e5e7eb;
}

.pet-shell[data-pet="planet"] .pet-body {
  background: radial-gradient(circle at 30% 20%, #f9fafb, #38bdf8);
}
.pet-shell[data-pet="planet"] .pet-body::after {
  content: "";
  position: absolute;
  left: -4px;
  right: -4px;
  top: 9px;
  height: 4px;
  border-radius: 999px;
  border: 2px solid rgba(148,163,184,0.9);
  border-left-color: transparent;
  border-right-color: transparent;
}

/* Idle / spánek animace – jen atmosféra */
.pet-shell.pet--idle .pet-body {
  animation: pet-bob 2.4s ease-in-out infinite;
}

.pet-shell.pet--sleep .pet-body {
  animation: pet-sleep 3s ease-in-out infinite;
  opacity: 0.85;
}
.pet-shell.pet--sleep .pet-eye {
  height: 1px;
  top: 8px;
}
.pet-shell.pet--sleep::after {
  content: "z";
  position: absolute;
  top: 4px;
  right: 8px;
  font-size: 0.55rem;
  color: rgba(255,255,255,0.7);
  text-transform: uppercase;
  animation: pet-zzz 3s ease-in-out infinite;
}

/* Keyframes */
@keyframes pet-bob {
  0% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
  100% { transform: translateY(0); }
}
@keyframes pet-sleep {
  0%,100% { transform: translateY(1px); }
  50% { transform: translateY(3px); }
}
@keyframes pet-zzz {
  0%   { opacity: 0; transform: translate(0, 4px); }
  40%  { opacity: 1; transform: translate(1px, 0); }
  100% { opacity: 0; transform: translate(2px, -4px); }
}

/* Náhled mazlíka v nastavení */
.pet-preview-icon {
  font-size: 1.7rem;
  line-height: 1;
  margin-bottom: 4px;
}
.pet-preview-text {
  font-size: 1.0rem;
  line-height: 1;
  margin-bottom: 4px;
}
/* === KOČKA 2 – CELÁ, LEŽÍCÍ A PROTAHUJÍCÍ SE === */

/* === KOČKA 2 – ČERNÁ KOČKA NA SVĚTLÉM POZADÍ === */

/* světlý displej jen pro cat2 */
.pet-shell[data-pet="cat2"] .pet-screen {
  width: 72%;
  height: 70%;
  background: radial-gradient(circle at 50% 15%, #f9fafb, #e5e7eb);
  border-radius: 16px;
  border: 1px solid rgba(148,163,184,0.85);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: visible;
}

/* tělo kočky – tmavé, aby na světle vylezlo */
.pet-shell[data-pet="cat2"] .pet-body {
  position: relative;
  width: 34px;
  height: 16px;
  border-radius: 12px 16px 12px 18px;
  background: linear-gradient(to right, #111827, #020617);
  box-shadow:
    0 0 0 1px rgba(15,23,42,0.9),
    0 0 6px rgba(15,23,42,0.8);
}

/* hlava se špičatýma ušima, taky tmavá */
.pet-shell[data-pet="cat2"] .pet-body::before {
  content: "";
  position: absolute;
  left: -11px;
  bottom: 3px;
  width: 15px;
  height: 15px;
  background: #111827;
  box-shadow:
    0 0 0 1px rgba(15,23,42,0.9),
    0 0 6px rgba(15,23,42,0.9);
  clip-path: polygon(
    15% 30%, 30% 0%, 45% 30%,   /* levé ucho */
    55% 30%, 70% 0%, 85% 30%,   /* pravé ucho */
    100% 60%, 100% 100%, 0 100%, 0 60%
  );
}

/* ocas – tmavý, viditelný */
.pet-shell[data-pet="cat2"] .pet-body::after {
  content: "";
  position: absolute;
  right: -8px;
  bottom: 4px;
  width: 12px;
  height: 12px;
  border-radius: 12px;
  border: 3px solid #111827;
  border-bottom-color: transparent;
  border-left-color: transparent;
  transform-origin: left bottom;
}

/* packy pod tělem */
.pet-shell[data-pet="cat2"] .pet-screen::after {
  content: "";
  position: absolute;
  bottom: 4px;
  left: 10px;
  width: 20px;
  height: 3px;
  border-radius: 999px;
  background: transparent;
  box-shadow:
    -5px 0 0 0 #111827,
    -1px 0 0 0 #111827,
     3px 0 0 0 #111827,
     7px 0 0 0 #111827;
}

/* oči – kočičí reflektory v tmavé hlavě */
.pet-shell[data-pet="cat2"] .pet-eye {
  width: 3px;
  height: 3px;
  top: 4px;
  background: #facc15;
  box-shadow: 0 0 4px rgba(250,204,21,0.9);
}
.pet-shell[data-pet="cat2"] .pet-eye-left {
  left: -7px;
}
.pet-shell[data-pet="cat2"] .pet-eye-right {
  left: -3px;
}

/* pusa netřeba */
.pet-shell[data-pet="cat2"] .pet-mouth {
  display: none;
}

/* idle = protahování */
.pet-shell[data-pet="cat2"].pet--idle .pet-body {
  animation: cat-stretch 3s ease-in-out infinite;
}

/* ocas se hýbe */
.pet-shell[data-pet="cat2"].pet--idle .pet-body::after {
  animation: cat-tail 1.8s ease-in-out infinite;
}

/* spánek – houpe se, oči tlumené */
.pet-shell[data-pet="cat2"].pet--sleep .pet-body {
  animation: pet-sleep 3s ease-in-out infinite;
}
.pet-shell[data-pet="cat2"].pet--sleep .pet-eye {
  opacity: 0.4;
}

/* pokud tyhle keyframes už někde máš, NEduplikuj je */
@keyframes cat-stretch {
  0%   { transform: translateX(0) scaleX(1); }
  30%  { transform: translateX(1px) scaleX(1.08); }
  45%  { transform: translateX(0) scaleX(1.1); }
  70%  { transform: translateX(-1px) scaleX(1.02); }
  100% { transform: translateX(0) scaleX(1); }
}

@keyframes cat-tail {
  0%, 100% { transform: rotate(25deg); }
  50%      { transform: rotate(55deg); }
}
/* cat2 – světlejší vajíčko a rámeček, ať kočka neleze do tmy kolem */

.pet-shell[data-pet="cat2"] {
  background: radial-gradient(circle at 25% 20%, #f9fafb, #e5e7eb);
  border-color: rgba(209,213,219,0.95);
  box-shadow: 0 3px 8px rgba(15,23,42,0.45);
}

/* displej ještě o chlup světlejší než shell */
.pet-shell[data-pet="cat2"] .pet-screen {
  background: radial-gradient(circle at 50% 15%, #ffffff, #f3f4f6);
  border-color: rgba(229,231,235,1);
}
/* Styly pro color picker */
input[type="color"] {
  width: 100%;
  height: 40px;
  border: 1px solid var(--line);
  background: var(--panel-3);
  border-radius: 8px;
  padding: 2px;
  cursor: pointer;
  transition: border-color 0.2s;
}
input[type="color"]:hover {
  border-color: var(--gold);
}

/* Aby editor nebyl nalepený */
#customThemeEditor label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
}
/* Tlačítko pro smazání (červený křížek) */
.card-delete-btn {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 24px;
  height: 24px;
  background: var(--danger);
  color: #fff;
  border-radius: 50%;
  border: 2px solid var(--panel);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  z-index: 100; /* Musí být hodně nahoře */
  box-shadow: 0 2px 5px rgba(0,0,0,0.5);
  transition: transform 0.2s;
}
.card-delete-btn:hover {
  transform: scale(1.1);
  background: red;
}

/* Důležité: Aby křížek držel na kartě */
.theme-card, .bubble-opt {
    position: relative !important; 
    overflow: visible !important; /* Aby křížek nebyl oříznutý */
}
/* === ROZŠÍŘENÉ BUBLINY === */

/* Styl pro záložky v editoru bublin */
.bubble-tabs { display: flex; border-bottom: 1px solid var(--line); margin-bottom: 15px; }
.b-tab { flex: 1; padding: 10px; background: transparent; border: none; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; }
.b-tab.active { color: var(--accent-2); border-bottom-color: var(--accent-2); font-weight: bold; }

/* Plátno pro kreslení */
#bubbleCanvas {
    background: #fff;
    border: 2px dashed var(--muted);
    cursor: crosshair;
    touch-action: none; /* Aby se na mobilu neposouvala stránka */
    border-radius: 4px;
    width: 100%;
    height: 150px;
}

/* Třída pro bubliny, které jsou nakreslené (clip-path) */
.msg.clipped {
    border: none !important; /* Standardní border musíme vypnout */
    /* Falešný okraj pomocí stínu, protože border u clip-path nefunguje */
    filter: drop-shadow(0 0 1px var(--bubble-border-color)); 
}
.msg {
  /* ... existující ... */
  clip-path: var(--bubble-clip-path, none) !important;
  filter: var(--bubble-filter, none) !important;
}
/* Plátno pro kreslení */
#bubbleCanvas {
    background: #fff;
    border: 2px dashed var(--muted);
    cursor: crosshair;
    touch-action: none; /* Aby se na mobilu neposouvala stránka */
    border-radius: 4px;
    width: 100%;
    height: 150px;
}

/* Třída pro bubliny, které jsou nakreslené (clip-path) */
.msg.clipped {
    border: none !important; /* Standardní border musíme vypnout */
    /* Falešný okraj pomocí stínu, protože border u clip-path nefunguje */
    filter: drop-shadow(0 0 1px var(--bubble-border-color)); 
}
/* ========================================= */
/* === OPRAVA GALERIE MOTIVŮ A BUBLIN === */
/* ========================================= */

/* Hlavní mřížka pro dlaždice */
.theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); /* Responzivní sloupce */
  gap: 12px;
  margin-top: 15px;
  margin-bottom: 25px;
}

/* Styl jedné dlaždice (karty) */
.theme-option {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 15px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  min-height: 100px; /* Aby byly karty stejně vysoké */
}

/* Hover efekt (najetí myší) */
.theme-option:hover {
  background: var(--panel-3);
  border-color: var(--gold);
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

/* Aktivní vybraná karta */
.theme-option.active {
  background: rgba(173, 150, 77, 0.1);
  border-color: var(--gold);
  box-shadow: 0 0 15px rgba(173, 150, 77, 0.15);
}

/* === NÁHLEDY UVNITŘ KARET === */

/* Náhled barvy motivu (kolečko) */
.theme-preview {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-bottom: 10px;
  border: 2px solid rgba(255,255,255,0.1);
  box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

/* Náhled tvaru bubliny */
.bubble-preview {
  width: 50px;
  height: 30px;
  background: var(--accent-2); /* Fallback barva */
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: bold;
  margin-bottom: 10px;
  border: 1px solid rgba(0,0,0,0.1);
}

/* Náhled fontu a mazlíčka */
.theme-option span {
  font-size: 0.85rem;
  color: var(--muted);
  text-align: center;
}

.theme-option.active span {
  color: var(--gold);
  font-weight: bold;
}

/* Nadpisy sekcí */
.inv-category-title {
  font-size: 0.9rem;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: 30px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 5px;
  letter-spacing: 1px;
}
/* ========================================================= */
/* === FIX: PROPOJENÍ POSUVNÍKŮ S VZHLEDEM (Radius, Blur, Stíny) === */
/* ========================================================= */

/* 1. ROZOSTŘENÍ POZADÍ (BLUR) */
/* Aplikujeme filtr na panely, karty a boční menu */
.side, 
.card, 
.settings-content, 
.msg, 
.dropdown-content,
.modal-content,
.pane .composer {
    /* Použije hodnotu z JS, jinak nic */
    backdrop-filter: var(--backdrop-blur, none);
    -webkit-backdrop-filter: var(--backdrop-blur, none);
}

/* 2. ZAOBLENÍ ROHŮ (RADIUS) */
/* Přinutíme všechny prvky používat tvůj posuvník místo pevných 12px */
.side, 
.card, 
.settings-content, 
.msg-input,
.theme-option, 
.btn, 
input[type="text"], 
textarea,
.dropdown-content, 
.modal-content,
.notif-panel,
.settings-dropdown-menu {
    border-radius: var(--radius) !important;
}

/* Bubliny zpráv mají vlastní logiku, ale pokud chceš, 
   aby radius ovlivňoval i je (mimo custom tvar), odkomentuj toto: */
/* .msg { border-radius: var(--radius) !important; } */


/* 3. STÍNY (SHADOW) */
/* Aplikujeme stín na hlavní kontejnery */
.side, 
.card, 
.settings-content.card, 
.modal-content,
.dropdown-content {
    box-shadow: var(--shadow) !important;
    /* Přidáme přechod, aby změna stínu byla plynulá */
    transition: box-shadow 0.3s ease, background 0.3s ease, border-radius 0.3s ease;
}

/* 4. ÚPRAVA PRO NEONOVÝ STÍN */
/* Pokud vybereš Neon, odstraníme rámečky, aby to lépe zářilo */
[data-theme="custom"] .side,
[data-theme="custom"] .card,
[data-theme="custom"] .settings-content {
    /* Pokud je stín neonový (obsahuje barvu accent), zrušíme border */
    border-color: var(--line); 
}
/* ========================================= */
/* === OPRAVA ZDI (WALL STYLES) === */
/* ========================================= */

/* 1. KARTA PŘÍSPĚVKU */
.feed-post {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 15px;
  margin-bottom: 15px;
  /* Pojistka proti přetečení */
  max-width: 100%;
  overflow: hidden; 
}

/* 2. HLAVIČKA PŘÍSPĚVKU (Avatar + Jméno) */
.post-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

/* 3. AVATAR U PŘÍSPĚVKU (Tohle je ten viník!) */
.post-avatar {
  width: 40px !important;       /* Pevná šířka */
  height: 40px !important;      /* Pevná výška */
  min-width: 40px !important;   /* Nesmí se zmáčknout */
  
  border-radius: 50%;
  background: var(--panel-3);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--gold);
  overflow: hidden;             /* Co přečuhuje, uříznout */
  flex-shrink: 0;               /* Zákaz zmenšování/zvětšování ve flexboxu */
}

/* Obrázek uvnitř avatara */
.post-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 4. OBSAH PŘÍSPĚVKU */
.post-content {
  line-height: 1.5;
  white-space: pre-wrap; /* Zachová řádkování */
  color: var(--text);
  word-wrap: break-word; /* Dlouhá slova se zalomí */
}

.post-author { font-weight: bold; color: var(--text); }
.post-time { font-size: 0.75rem; color: var(--muted); }

/* 5. INPUT PRO NOVÝ PŘÍSPĚVEK */
#postInput {
  background: var(--panel-3);
  border: 1px solid var(--line);
  color: var(--text);
  padding: 10px;
}
#postInput:focus {
  outline: none;
  border-color: var(--gold);
  background: var(--panel);
}

/* 6. ZÁLOŽKY (TABS) NA ZDI */
.wall-tabs-container {
  position: sticky; 
  top: 0; 
  z-index: 90;
  background: var(--bg); /* Aby pod tím neprosvítal obsah při scrollování */
  padding: 10px 0 5px 0;
  border-bottom: 1px solid var(--line);
  margin-bottom: 20px;
}

.wall-tabs-scroll {
  display: flex; 
  overflow-x: auto; 
  gap: 8px; 
  padding: 0 10px;
  scrollbar-width: none; /* Skryje posuvník ve Firefoxu */
}
.wall-tabs-scroll::-webkit-scrollbar { display: none; } /* Skryje v Chrome/Safari */

.wall-tab {
  background: var(--panel-2); 
  color: var(--muted);
  border: 1px solid var(--line); 
  padding: 8px 16px;
  border-radius: 20px; 
  font-size: 0.9rem; 
  font-weight: 600;
  white-space: nowrap; 
  cursor: pointer; 
  transition: all 0.2s;
}

.wall-tab.active {
  background: var(--gold); 
  color: #000; 
  opacity: 1; 
  border-color: var(--gold);
  box-shadow: 0 0 10px rgba(173, 150, 77, 0.4);
}

.wall-tab.wall-tab-add {
  background: transparent; 
  border: 1px dashed var(--muted); 
  color: var(--gold);
  width: 36px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* ========================================= */
/* === VÝJIMKA PRO OBRÁZKY (Zákaz ořezu) === */
/* ========================================= */

.msg.is-media {
  /* 1. Vypneme kreslený tvar */
  clip-path: none !important; 
  
  /* 2. Nastavíme normální kulaté rohy */
  border-radius: 12px !important;
  
  /* 3. Přidáme rámeček a stín, ať to vypadá hezky */
  border: 1px solid var(--line) !important;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2) !important;
  
  /* 4. Upravíme padding, aby fotka nebyla moc zmáčknutá */
  padding: 6px !important;
  
  /* Volitelné: Barva pozadí pod fotkou */
  background: var(--panel-2) !important;
}
/* === MEDIA QUERIES PRO MOBILY (Max šířka 600px) === */
@media screen and (max-width: 600px) {

    /* 1. Oprava hlavičky - zjednodušení */
    .sitebar {
        padding: 5px 10px !important;
        gap: 8px !important;
        flex-wrap: wrap; /* Povolit zalomení, když je málo místa */
    }
    
    /* Schováme text "Upravit Vzhled" na mobilu, aby zbylo místo pro tlačítka */
    .sitebar > div:last-child {
        display: none; 
    }
    
    /* Zvětšíme tlačítko menu, aby se dobře mačkalo prstem */
    .dropbtn {
        font-size: 1.5rem !important;
        padding: 8px 12px !important;
    }

    /* 2. Oprava Canvasu (Editor kurzoru a bublin) */
    /* Místo fixních 320px mu řekneme: maximálně 100% šířky displeje */
    #cursorCanvas, #bubbleCanvas {
        width: 100% !important; 
        max-width: 320px;       /* Na PC zůstane 320px */
        height: auto !important;
        aspect-ratio: 1 / 1;    /* Udrží čtvercový poměr */
    }

    /* 3. Editor motivu - aby se vešel na displej */
    #customThemeEditor, #customBubbleEditor, #customCursorEditor {
        padding: 15px !important;
        width: 100% !important;
        box-sizing: border-box; /* Aby padding nerozšiřoval element */
    }

    /* Inputy a posuvníky přes celou šířku */
    .settings-content input[type="range"], 
    .settings-content input[type="text"],
    .settings-content select {
        width: 100% !important;
        max-width: none !important;
        font-size: 16px; /* Zabrání zoomování na iPhonech při kliknutí */
    }

    /* 4. Oprava Dropdown menu */
    .dropdown-content {
        min-width: 200px;
        left: 0; /* Zarovnat doleva */
        top: 100%;
        background: var(--panel-2); /* Ujistit se, že není průhledné */
        box-shadow: 0 10px 30px rgba(0,0,0,0.5); /* Výraznější stín */
        z-index: 9999; /* Aby bylo nad vším ostatním */
    }
    
    /* 5. Galerie motivů - menší dlaždice na mobilu */
    .theme-grid {
        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)) !important;
        gap: 8px !important;
    }
    .theme-card, .theme-option {
        min-height: 80px !important;
        font-size: 0.8rem !important;
    }
}
/* === MOBILNÍ OPRAVY (Vlož na konec styles.css) === */
@media screen and (max-width: 600px) {
    
    /* Zvětšíme prostor pro Editor motivů */
    #customThemeEditor {
        padding: 15px !important;
        width: 100% !important;
        box-sizing: border-box; /* Aby padding nerozšiřoval element mimo obrazovku */
    }

    /* Inputy barev a slidery na plnou šířku */
    #customThemeEditor input[type="range"],
    #customThemeEditor select,
    #customThemeEditor input[type="text"] {
        width: 100% !important;
        max-width: none !important;
        box-sizing: border-box;
    }
    
    /* Barvy v editoru - mřížka 2 sloupce místo namačkaných */
    #customThemeEditor div[style*="grid-template-columns"] {
        grid-template-columns: 1fr 1fr !important; /* Dva sloupce barev */
    }

    /* Hlavička - srovnání */
    .sitebar {
        padding: 10px !important;
        flex-wrap: nowrap !important; /* Zabrání zalomení */
        gap: 10px !important;
    }
    
    /* Skryjeme text "Upravit Vzhled" na malých mobilech, ať je místo */
    .sitebar > div:last-child {
        display: none; 
    }

    /* Oprava plátna pro bubliny a kurzor - aby nelezlo ven */
    canvas {
        max-width: 100% !important;
        height: auto !important;
    }
}

/* Kontejner pro zprávy a lištu */
body.chat-mode .pane {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden; /* Důležité! */
    position: relative;
}

/* === CHAT MODE - FINAL FIX (Layout & Mezery) === */

/* 1. Hlavní kontejner - natvrdo výška displeje */
body.chat-mode, 
body.chat-mode html {
    height: 100dvh; /* Dynamic viewport height - řeší lišty prohlížeče */
    overflow: hidden !important; /* Zákaz scrollování stránky */
    margin: 0;
}

body.chat-mode .wrap {
    height: 100%;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
}
/* === OPRAVA PRO MOBILNÍ PICKR === */
/* Na mobilech uděláme z popupu "spodní lištu", která nikam neutíká */
@media (max-width: 768px) {
    .pcr-app {
        position: fixed !important;
        top: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
        border-radius: 20px 20px 0 0 !important;
        box-shadow: 0 -5px 20px rgba(0,0,0,0.5) !important;
        z-index: 10000 !important; /* Musí být nad vším */
        transform: none !important; /* Zrušíme výpočty pozice knihovny */
        display: flex;
        flex-direction: column;
    }
    
    /* Zvětšíme ovládací prvky pro prsty */
    .pcr-interaction input {
        font-size: 16px !important; /* Aby iPhone nezoomoval */
        padding: 10px !important;
    }
    .pcr-selection .pcr-picker {
        width: 30px !important;
        height: 30px !important; /* Větší kroužek pro výběr */
        border: 2px solid #fff;
        box-shadow: 0 0 5px rgba(0,0,0,0.5);
    }
}
/* Paleta barev přilepená na spodek obrazovky (mobilní styl) */
@media (max-width: 768px) {
    .pcr-app {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
        border-radius: 15px 15px 0 0 !important;
        box-shadow: 0 -5px 30px rgba(0,0,0,0.6) !important;
        z-index: 99999 !important;
        display: flex;
        flex-direction: column;
    }
    /* Větší tlačítka pro prsty */
    .pcr-interaction .pcr-save {
        font-size: 1.2rem !important;
        padding: 10px 20px !important;
    }
    /* Aby obsah stránky nebyl schovaný pod paletou, přidáme odsazení */
    body { padding-bottom: 200px; } 
}