:root{
      --bg:#f5f6f8;
      --card:#ffffff;
      --text:#111827;
      --muted:#6b7280;
      --border:#e5e7eb;
      --shadow: 0 8px 24px rgba(0,0,0,.08);
      --radius: 16px;
      --input-bg:#ffffff;

      --case-bg:#6b1d2a;   /* burgundy */
      --edu-bg:#f59e0b;    /* oranžová */
    }

    [data-theme="dark"]{
      --bg:#1f2937;
      --card:#374151;
      --text:#f9fafb;
      --muted:#9ca3af;
      --border:#4b5563;
      --shadow: 0 8px 24px rgba(0,0,0,.3);
      --input-bg:#4b5563;
      --case-bg:#4a1526;
      --edu-bg:#b45309;
    }

    body{
      margin:0;
      background:var(--bg);
      color:var(--text);
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
      transition: background .3s, color .3s;
    }
    body.bg-case { background: var(--case-bg); }
    body.bg-edu  { background: var(--edu-bg); }
    body.bg-neutral { background: var(--bg); }

    [data-theme="dark"] .card,
    [data-theme="dark"] .header{
      background: var(--card);
    }

    [data-theme="dark"] input,
    [data-theme="dark"] textarea,
    [data-theme="dark"] select{
      background: var(--input-bg);
      color: var(--text);
      border-color: var(--border);
    }

    [data-theme="dark"] .dropdown-menu{
      background: var(--card);
      border-color: var(--border);
    }

    [data-theme="dark"] .dropdown-item:hover{
      background: #4b5563;
    }

    [data-theme="dark"] .mode-bar{
      background: #374151;
    }

    [data-theme="dark"] .cards-modal-content,
    [data-theme="dark"] .summary-modal-content{
      background: var(--card);
    }

    [data-theme="dark"] .session-panel,
    [data-theme="dark"] .notes-panel,
    [data-theme="dark"] .plan-panel,
    [data-theme="dark"] .measurements-panel,
    [data-theme="dark"] .exercises-panel,
    [data-theme="dark"] .tags-panel,
    [data-theme="dark"] .timeline-panel{
      background: var(--card) !important;
      color: var(--text);
    }

    [data-theme="dark"] .log{
      background: var(--card) !important;
      color: var(--text);
    }

    [data-theme="dark"] .log > div{
      color: var(--text) !important;
    }

    [data-theme="dark"] [style*="background:#fff"],
    [data-theme="dark"] [style*="background: #fff"]{
      background: var(--card) !important;
    }

    [data-theme="dark"] .admin-tab{
      background: var(--card) !important;
      color: var(--text) !important;
      border-color: #7c3aed !important;
    }

    [data-theme="dark"] .admin-tab.active{
      background: #7c3aed !important;
      color: #fff !important;
    }

    [data-theme="dark"] button[style*="background:#fff"]{
      background: var(--card) !important;
      color: var(--text) !important;
    }

    [data-theme="dark"] div[style*="background:#fff"]{
      background: var(--card) !important;
      color: var(--text) !important;
    }

    [data-theme="dark"] .history-panel,
    [data-theme="dark"] #historyBox{
      background: var(--card) !important;
      color: var(--text) !important;
    }

    [data-theme="dark"] #btnNew,
    [data-theme="dark"] #btnExisting,
    [data-theme="dark"] #btnLogout,
    [data-theme="dark"] #btnNewClientCancel{
      background: var(--card) !important;
      color: var(--text) !important;
      border-color: var(--border) !important;
    }

    [data-theme="dark"] button[style*="color:#111827"],
    [data-theme="dark"] button[style*="color: #111827"]{
      color: var(--text) !important;
    }

    [data-theme="dark"] button[style*="background:#fff"],
    [data-theme="dark"] button[style*="background: #fff"],
    [data-theme="dark"] button[style*="background:#ffffff"]{
      background: var(--card) !important;
      color: var(--text) !important;
      border-color: var(--border) !important;
    }

    .wrap{
      max-width: 980px;
      margin: 0 auto;
      padding: 18px;
    }

    .card{
      background:var(--card);
      border:1px solid var(--border);
      box-shadow: var(--shadow);
      border-radius: var(--radius);
      overflow:hidden;
    }

    .header{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:14px;
      padding:16px 18px;
      border-bottom:1px solid var(--border);
      background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
    }

    .header-left{
      display:flex;
      align-items:center;
      gap:14px;
      min-width: 0;
    }

    .logo{
      width:44px;
      height:44px;
      border-radius: 12px;
      border:1px solid var(--border);
      background:#fff;
      display:flex;
      align-items:center;
      justify-content:center;
      overflow:hidden;
      flex: 0 0 auto;
    }

    .logo img{
      width:100%;
      height:100%;
      object-fit:contain;
    }

    .title{
      display:flex;
      flex-direction:column;
      line-height:1.15;
      min-width: 0;
    }

    .title h1{
      font-size:18px;
      margin:0;
      font-weight:800;
      letter-spacing: .2px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .title .sub{
      font-size:12px;
      margin-top:4px;
      color:var(--muted);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .trainer{
      display:flex;
      align-items:center;
      gap:8px;
      font-size:12px;
      color:var(--muted);
      font-weight:800;
      white-space: nowrap;
    }

    .trainer strong{
      color: var(--text);
      font-weight:900;
    }

    .body{
      padding: 14px 18px 18px;
    }

    #log{
      border:1px solid var(--border);
      background:#fff;
      border-radius: 14px;
      padding: 12px 12px;
      min-height: 260px;
      max-height: 420px;
      overflow:auto;
    }

    .msg{
      margin: 10px 0;
      line-height: 1.45;
      font-size: 14px;
    }

    .msg-content{
      display: inline;
    }

    .msg.structured-response{
      background: #f8fafc;
      border-radius: 12px;
      padding: 12px 14px;
      border: 1px solid #e2e8f0;
    }

    .msg.structured-response .msg-content{
      display: block;
      margin-top: 8px;
    }

    .response-section{
      margin: 12px 0;
      padding: 10px 12px;
      border-radius: 8px;
      border-left: 4px solid;
    }

    .section-thought{
      background: #f0f9ff;
      border-color: #3b82f6;
    }

    .section-client{
      background: #f0fdf4;
      border-color: #22c55e;
    }

    .section-warning{
      background: #fef2f2;
      border-color: #ef4444;
    }

    .section-header{
      font-weight: 700;
      font-size: 13px;
      margin-bottom: 8px;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .section-icon{
      font-size: 16px;
    }

    .section-content{
      font-size: 14px;
      line-height: 1.5;
    }

    .response-list{
      margin: 8px 0 0 16px;
      padding: 0;
    }

    .response-list li{
      margin: 4px 0;
      padding-left: 4px;
    }

    .response-container{
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .response-intro{
      font-size: 14px;
      line-height: 1.5;
      color: #374151;
    }

    .response-para{
      margin: 4px 0;
      line-height: 1.5;
    }

    .label{
      font-weight: 900;
      margin-right: 6px;
    }

    .statusbar{
      display:flex;
      gap:10px;
      align-items:center;
      justify-content:space-between;
      margin-bottom:10px;
    }

    .status-left{
      display:flex;
      gap:10px;
      align-items:center;
      min-width: 0;
    }

    .pill{
      display:inline-flex;
      align-items:center;
      padding:6px 10px;
      border-radius:999px;
      font-weight:900;
      font-size:12px;
      border:1px solid var(--border);
      background:#fff;
    }

    .muted{
      color:var(--muted);
      font-size:12px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    /* ===== MODE BAR ===== */
    .mode-bar{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      padding:10px 12px;
      border-radius:12px;
      border:1px solid var(--border);
      margin-bottom:12px;
      font-weight:900;
      letter-spacing:.2px;
    }

    .mode-left{
      display:flex;
      align-items:center;
      gap:10px;
      min-width:0;
    }

    .mode-title{
      min-width:0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .mode-actions{
      display:flex;
      gap:8px;
      align-items:center;
      flex: 0 0 auto;
    }

    .mode-btn{
      padding:8px 10px;
      border-radius: 999px;
      border:1px solid rgba(255,255,255,.35);
      background: rgba(255,255,255,.14);
      color: inherit;
      font-weight: 900;
      cursor:pointer;
      white-space: nowrap;
    }

    .mode-btn:hover{ opacity: .92; }

    .mode-bar.case{
      background:var(--case-bg);
      border-color:var(--case-bg);
      color:#ffffff;
    }

    .mode-bar.edu{
      background:var(--edu-bg);
      border-color:var(--edu-bg);
      color:#111827;
    }

    .mode-bar.neutral{
      background:#ffffff;
      color:#111827;
    }

    /* ===== Dropdown Menu ===== */
    .menu-container{
      position: relative;
    }

    .menu-btn{
      font-size: 18px;
      padding: 6px 10px;
      line-height: 1;
    }

    .dropdown-menu{
      position: absolute;
      top: 100%;
      right: 0;
      margin-top: 4px;
      background: #fff;
      border: 1px solid var(--border);
      border-radius: 12px;
      box-shadow: 0 8px 24px rgba(0,0,0,.15);
      min-width: 180px;
      z-index: 100;
      overflow: hidden;
    }

    .dropdown-item{
      padding: 12px 14px;
      cursor: pointer;
      font-size: 14px;
      font-weight: 600;
      color: #111827;
    }

    .dropdown-item:hover{
      background: #f3f4f6;
    }

    /* ===== Client Cards Modal ===== */
    .cards-modal{
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,.5);
      z-index: 9998;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
    }

    .cards-modal-content{
      width: min(800px, 100%);
      max-height: 85vh;
      background: #fff;
      border-radius: 16px;
      box-shadow: 0 20px 60px rgba(0,0,0,.25);
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }

    .cards-modal-header{
      padding: 16px 20px;
      border-bottom: 1px solid var(--border);
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .cards-modal-header h2{
      margin: 0;
      font-size: 18px;
      font-weight: 900;
    }

    .cards-modal-close{
      background: none;
      border: none;
      font-size: 24px;
      cursor: pointer;
      color: #6b7280;
      padding: 4px 8px;
    }

    .cards-modal-close:hover{
      color: #111827;
    }

    .cards-modal-body{
      padding: 20px;
      overflow-y: auto;
      flex: 1;
    }

    .client-card{
      background: #f9fafb;
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 16px;
      margin-bottom: 12px;
      cursor: pointer;
      transition: box-shadow .15s;
    }

    .client-card:hover{
      box-shadow: 0 4px 12px rgba(0,0,0,.1);
    }

    .client-card-header{
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 10px;
    }

    .client-card-name{
      font-size: 16px;
      font-weight: 900;
      color: #111827;
    }

    .client-card-stats{
      font-size: 12px;
      color: #6b7280;
      text-align: right;
    }

    .client-card-interview{
      font-size: 13px;
      color: #374151;
      background: #fff;
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 10px 12px;
      margin-top: 8px;
    }

    .client-card-interview-item{
      margin-bottom: 6px;
    }

    .client-card-interview-q{
      font-weight: 700;
      color: #6b7280;
      font-size: 11px;
    }

    .client-card-interview-a{
      color: #111827;
    }

    .cards-filter-btn{
      padding: 8px 14px;
      font-size: 13px;
      font-weight: 600;
      border: 1px solid #e5e7eb;
      background: #fff;
      color: #374151;
      border-radius: 8px;
      cursor: pointer;
      transition: all .15s;
    }

    .cards-filter-btn:hover{
      background: #f9fafb;
      border-color: #d1d5db;
    }

    .cards-filter-btn.active{
      background: #111827;
      color: #fff;
      border-color: #111827;
    }

    .client-card-pin{
      width: 28px;
      height: 28px;
      border: none;
      background: none;
      font-size: 18px;
      cursor: pointer;
      color: #d1d5db;
      transition: color .15s;
    }

    .client-card-pin:hover,
    .client-card-pin.pinned{
      color: #f59e0b;
    }

    .client-card.pinned{
      border-color: #fbbf24;
      background: #fffbeb;
    }

    .client-card-notes{
      margin-top: 8px;
      font-style: italic;
      color: #6b7280;
    }

    .no-cards-msg{
      text-align: center;
      color: #6b7280;
      padding: 40px 20px;
    }

    /* ===== Session Tabs ===== */
    .session-tabs{
      display: flex;
      gap: 4px;
      background: #f3f4f6;
      border-radius: 10px;
      padding: 4px;
      margin-bottom: 12px;
    }
    .session-tab{
      flex: 1;
      padding: 10px 12px;
      border: none;
      background: transparent;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 600;
      color: #6b7280;
      cursor: pointer;
      transition: all .15s;
    }
    .session-tab:hover{
      background: #e5e7eb;
    }
    .session-tab.active{
      background: #fff;
      color: #111827;
      box-shadow: 0 2px 4px rgba(0,0,0,.08);
    }
    .session-panel{
      display: none;
    }
    .session-panel.active{
      display: block;
    }

    /* ===== Scroll mode: all panels visible as stacked sections ===== */
    #sessionTabsContainer.scroll-mode .session-tab {
      opacity: 0.7;
      font-size: 11px;
      padding: 5px 10px;
    }
    #sessionTabsContainer.scroll-mode .session-tab.active {
      opacity: 1;
      background: var(--primary);
      color: #fff;
      border-color: var(--primary);
    }
    #sessionTabsContainer.scroll-mode .session-tabs {
      gap: 4px;
      padding: 6px 0;
    }
    #sessionTabsContainer.scroll-mode::after {
      display: block;
      content: "▼ scroll nadol pre všetky sekcie";
      font-size: 10px;
      color: #9ca3af;
      text-align: center;
      padding-bottom: 4px;
      letter-spacing: 0.3px;
    }
    .session-panel.scroll-visible {
      display: block !important;
    }
    .session-panel.scroll-visible[data-panel]:not([data-panel="chat"]) {
      border-top: 3px solid var(--primary) !important;
      scroll-margin-top: 80px;
    }

    /* ===== Session Tabs More Dropdown ===== */
    .tab-more-wrapper {
      position: relative;
      flex: 0 0 auto;
    }
    .tab-more-toggle {
      white-space: nowrap;
    }
    .tab-more-toggle.active {
      background: #fff;
      color: #111827;
      box-shadow: 0 2px 4px rgba(0,0,0,.08);
    }
    .tab-more-dropdown {
      display: none;
      position: absolute;
      top: calc(100% + 6px);
      right: 0;
      background: #fff;
      border: 1px solid #e5e7eb;
      border-radius: 10px;
      z-index: 300;
      min-width: 150px;
      box-shadow: 0 4px 16px rgba(0,0,0,.12);
      padding: 4px;
      flex-direction: column;
      gap: 2px;
    }
    .tab-more-dropdown.open {
      display: flex;
    }
    .tab-more-dropdown .session-tab {
      flex: none;
      width: 100%;
      text-align: left;
      justify-content: flex-start;
      border-radius: 8px;
    }

    /* ===== Training Notes Panel ===== */
    .notes-panel textarea{
      width: 100%;
      box-sizing: border-box;
      padding: 12px;
      border: 1px solid var(--border);
      border-radius: 10px;
      font-size: 14px;
      resize: vertical;
      min-height: 100px;
    }
    .notes-panel label{
      display: block;
      font-weight: 700;
      font-size: 13px;
      color: #374151;
      margin-bottom: 6px;
    }
    .notes-section{
      margin-bottom: 16px;
    }

    /* ===== Tags Panel ===== */
    .tags-checkboxes{
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }
    .tags-checkboxes label{
      display: flex;
      align-items: center;
      gap: 4px;
      padding: 6px 10px;
      background: #f3f4f6;
      border-radius: 16px;
      font-size: 12px;
      font-weight: 500;
      color: #374151;
      cursor: pointer;
      transition: all .15s;
    }
    .tags-checkboxes label:hover{
      background: #e5e7eb;
    }
    .tags-checkboxes input:checked + span,
    .tags-checkboxes label:has(input:checked){
      background: #6b1d2a;
      color: #fff;
    }

    /* ===== Search Modal ===== */
    .search-modal{
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0,0,0,.5);
      display: flex;
      align-items: flex-start;
      justify-content: center;
      padding-top: 80px;
      z-index: 1000;
    }
    .search-modal-content{
      background: #fff;
      border-radius: 16px;
      width: 600px;
      max-width: 95%;
      padding: 16px;
      box-shadow: 0 16px 48px rgba(0,0,0,.2);
    }
    .search-header{
      display: flex;
      gap: 10px;
      align-items: center;
    }
    .search-header input{
      flex: 1;
      padding: 14px 16px;
      border: 2px solid #6b1d2a;
      border-radius: 10px;
      font-size: 16px;
    }
    .search-filters{
      display: flex;
      gap: 8px;
      margin-top: 12px;
      flex-wrap: wrap;
    }
    .search-result-item{
      padding: 12px;
      border-bottom: 1px solid var(--border);
      cursor: pointer;
      transition: background .15s;
    }
    .search-result-item:hover{
      background: #f9fafb;
    }
    .search-result-client{
      font-weight: 700;
      font-size: 14px;
      color: #111827;
    }
    .search-result-meta{
      font-size: 12px;
      color: #6b7280;
      margin-top: 4px;
    }
    .search-result-tags{
      display: flex;
      gap: 4px;
      margin-top: 6px;
    }
    .search-result-tag{
      padding: 2px 8px;
      background: #e5e7eb;
      border-radius: 10px;
      font-size: 11px;
      color: #374151;
    }

    /* ===== Plan Panel ===== */
    .plan-panel .plan-item{
      display: flex;
      gap: 8px;
      margin-bottom: 8px;
    }
    .plan-panel .plan-item input{
      flex: 1;
      padding: 10px;
      border: 1px solid var(--border);
      border-radius: 8px;
      font-size: 14px;
    }

    /* ===== Measurements Panel ===== */
    .measurements-panel table{
      width: 100%;
      border-collapse: collapse;
      font-size: 13px;
    }
    .measurements-panel th, .measurements-panel td{
      padding: 8px 10px;
      text-align: left;
      border-bottom: 1px solid var(--border);
    }
    .measurements-panel th{
      background: #f9fafb;
      font-weight: 700;
      font-size: 12px;
      color: #6b7280;
    }
    .measurements-panel input{
      width: 100%;
      box-sizing: border-box;
      padding: 6px 8px;
      border: 1px solid var(--border);
      border-radius: 6px;
      font-size: 13px;
    }

    /* ===== Summary Modal ===== */
    .summary-modal{
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,.6);
      z-index: 9999;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
    }
    .summary-modal-content{
      width: min(700px, 100%);
      max-height: 90vh;
      background: #fff;
      border-radius: 16px;
      box-shadow: 0 20px 60px rgba(0,0,0,.3);
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }
    .summary-header{
      padding: 20px 24px;
      background: linear-gradient(135deg, #6b1d2a 0%, #8b2438 100%);
      color: #fff;
    }
    .summary-header h2{
      margin: 0 0 4px 0;
      font-size: 20px;
      font-weight: 900;
    }
    .summary-header .sub{
      font-size: 13px;
      opacity: .85;
    }
    .summary-body{
      padding: 20px 24px;
      overflow-y: auto;
      flex: 1;
    }
    .summary-section{
      margin-bottom: 20px;
    }
    .summary-section h3{
      margin: 0 0 10px 0;
      font-size: 14px;
      font-weight: 700;
      color: #6b1d2a;
      border-bottom: 2px solid #fce7f3;
      padding-bottom: 6px;
    }
    .summary-section ul{
      margin: 0;
      padding-left: 20px;
    }
    .summary-section li{
      margin-bottom: 6px;
      font-size: 14px;
    }
    .summary-item{
      background: #f9fafb;
      border-radius: 8px;
      padding: 10px 12px;
      margin-bottom: 8px;
    }
    .summary-item-label{
      font-size: 11px;
      font-weight: 700;
      color: #6b7280;
      margin-bottom: 4px;
    }
    .summary-footer{
      padding: 16px 24px;
      border-top: 1px solid var(--border);
      display: flex;
      gap: 10px;
      justify-content: flex-end;
    }
    .summary-footer button{
      padding: 12px 20px;
      border-radius: 10px;
      font-weight: 600;
      cursor: pointer;
    }

    /* ===== Client Snapshot Panel ===== */
    .client-snapshot{
      background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
      border: 1px solid #f59e0b;
      border-radius: 12px;
      padding: 16px;
      margin-bottom: 12px;
    }
    .snapshot-header{
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 12px;
    }
    .snapshot-profile{
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
      gap: 10px;
      margin-bottom: 12px;
    }
    .snapshot-profile-item{
      font-size: 12px;
    }
    .snapshot-profile-item label{
      display: block;
      font-weight: 700;
      color: #92400e;
      font-size: 10px;
      text-transform: uppercase;
    }
    .snapshot-trainings{
      background: #fff;
      border-radius: 8px;
      padding: 10px 12px;
    }
    .snapshot-training{
      display: flex;
      gap: 10px;
      align-items: center;
      padding: 6px 0;
      border-bottom: 1px solid #fde68a;
      font-size: 13px;
    }
    .snapshot-training:last-child{
      border-bottom: none;
    }
    .snapshot-training-date{
      font-weight: 700;
      color: #92400e;
      min-width: 80px;
    }
    .snapshot-homework{
      margin-top: 10px;
      background: #fef3c7;
      border-radius: 8px;
      padding: 10px 12px;
      font-size: 13px;
    }

    /* ===== History hint box ===== */
    .history{
      border:1px dashed var(--border);
      border-radius: 12px;
      background:#fff;
      padding:10px 12px;
      margin-bottom: 12px;
    }
    .history h3{
      margin:0 0 6px 0;
      font-size:12px;
      font-weight:900;
      color: var(--muted);
      letter-spacing:.2px;
    }
    .history .hint{
      font-size:12px;
      color: var(--muted);
    }
    .history ul{
      margin:8px 0 0 0;
      padding-left: 16px;
      font-size:12px;
      color: var(--text);
    }

    /* ===== Composer ===== */
    .composer{
      margin-top: 12px;
      display: flex;
      gap: 10px;
      align-items: flex-end;
    }

    .composer textarea{
      flex: 1;
      width: 100%;
      min-width: 0;          /* ✅ dôležité pre flex, aby netlačilo button mimo */
      box-sizing: border-box;
    }

    @media (min-width: 1024px){
      .composer textarea{
        min-height: 120px;
        max-height: 260px;
        font-size: 15px;
      }
    }

    textarea{
      width: 100%;
      box-sizing: border-box;
      min-height: 56px;
      max-height: 180px;
      resize: vertical;
      padding: 12px 12px;
      border-radius: 14px;
      border: 1px solid var(--border);
      font-size: 14px;
      outline: none;
      background: #fff;
    }

    textarea:focus{
      box-shadow: 0 0 0 4px rgba(17,24,39,.06);
      border-color: #d1d5db;
    }

    button{
      padding: 12px 16px;
      border-radius: 14px;
      border: 1px solid var(--border);
      background: #111827;
      color: #fff;
      font-weight: 900;
      cursor: pointer;
      white-space: nowrap;
    }

    button:disabled{
      opacity:.55;
      cursor:not-allowed;
    }

    #suggest{
      border: 1px solid var(--border);
      border-radius: 12px;
      background: #fff;
      padding: 6px;
      display: none;
    }

    .sug-item{
      padding: 8px 10px;
      border-radius: 10px;
      cursor: pointer;
    }

    .sug-item:hover{
      background: #f3f4f6;
    }

    .sug-muted{
      color: var(--muted);
      font-size: 12px;
      padding: 6px 10px;
    }

    /* loading spinner */
    .loading-indicator{
      color:#6b7280;
      font-style:italic;
    }
    .spinner{
      display:inline-block;
      width:12px;
      height:12px;
      border:2px solid #d1d5db;
      border-top-color:#6b1d2a;
      border-radius:50%;
      animation:spin 1s linear infinite;
      margin-left:6px;
      vertical-align:middle;
    }
    @keyframes spin{
      to{transform:rotate(360deg);}
    }

    .overlay-loading{
      position:fixed; top:0; left:0; right:0; bottom:0;
      background:rgba(0,0,0,0.35); z-index:99999;
      display:flex; align-items:center; justify-content:center;
      backdrop-filter:blur(2px);
    }
    .overlay-loading-box{
      background:#fff; border-radius:16px; padding:28px 40px;
      display:flex; flex-direction:column; align-items:center; gap:12px;
      box-shadow:0 8px 32px rgba(0,0,0,0.2);
    }
    .overlay-loading-spinner{
      width:36px; height:36px; border:4px solid #e5e7eb;
      border-top-color:#6b1d2a; border-radius:50%;
      animation:spin 0.8s linear infinite;
    }
    .overlay-loading-text{
      font-size:15px; font-weight:600; color:#374151;
    }
    [data-theme="dark"] .overlay-loading-box{
      background:#374151;
    }
    [data-theme="dark"] .overlay-loading-text{
      color:#f9fafb;
    }

    .btn-loading{
      position:relative; pointer-events:none; opacity:0.75;
    }
    .btn-loading::after{
      content:''; display:inline-block; width:14px; height:14px;
      border:2px solid rgba(255,255,255,0.4); border-top-color:#fff;
      border-radius:50%; animation:spin 0.7s linear infinite;
      margin-left:8px; vertical-align:middle;
    }

    .skeleton{
      background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%);
      background-size:200% 100%; animation:shimmer 1.5s infinite;
      border-radius:8px;
    }
    [data-theme="dark"] .skeleton{
      background:linear-gradient(90deg,#374151 25%,#4b5563 50%,#374151 75%);
      background-size:200% 100%;
    }
    @keyframes shimmer{
      0%{background-position:200% 0;}
      100%{background-position:-200% 0;}
    }

    /* malé info hlášky */
    .toast{
      transition: opacity 0.3s, transform 0.3s;
      padding: 6px 12px;
      border-radius: 8px;
      font-weight: 600;
    }
    .toast.success{ background: #d1fae5; color: #065f46; }
    .toast.error{ background: #fee2e2; color: #991b1b; }
    .toast.info{ background: #dbeafe; color: #1e40af; }
    .toast:empty{ background: transparent; padding: 0; }

    /* Error banner */
    .error-banner{
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      background: #dc2626;
      color: white;
      padding: 12px 20px;
      font-weight: 600;
      z-index: 10000;
      display: flex;
      justify-content: space-between;
      align-items: center;
      box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    }
    .error-banner.hidden{ display: none; }
    .error-banner button{
      background: white;
      color: #dc2626;
      border: none;
      padding: 6px 12px;
      border-radius: 4px;
      cursor: pointer;
      font-weight: 600;
    }
    .error-banner button:hover{ background: #fee2e2; }

    .mode-btn:disabled{
      opacity: 0.5;
      cursor: not-allowed;
    }
    .mode-btn.loading{
      pointer-events: none;
      opacity: 0.7;
    }
    @keyframes pulse{
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.6; transform: scale(1.1); }
    }
    @keyframes pulseAlert{
      0% { box-shadow: 0 0 0 0 rgba(220,38,38,0.5); }
      50% { box-shadow: 0 0 0 8px rgba(220,38,38,0); }
      100% { box-shadow: 0 0 0 0 rgba(220,38,38,0); }
    }
    .pulse-alert{
      animation: pulseAlert 0.6s ease-out 3;
    }
    #stickyActionsPanel{
      position: fixed;
      bottom: 100px;
      right: 20px;
      display: none;
      flex-direction: column;
      gap: 8px;
      z-index: 99997;
      pointer-events: auto !important;
    }
    .sticky-btn{
      padding: 10px 14px;
      border-radius: 10px;
      border: 1px solid var(--border);
      background: #fff;
      color: #374151;
      font-weight: 600;
      font-size: 12px;
      cursor: pointer;
      pointer-events: auto !important;
      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
      transition: all 0.15s;
    }
    .sticky-btn:hover{ background: #f9fafb; transform: translateY(-1px); }
    .sticky-btn.primary{ background: #6b1d2a; color: #fff; border-color: #6b1d2a; }
    .sticky-btn.danger{ background: #dc2626; color: #fff; border-color: #dc2626; }

    .toast-old{
      margin: 10px 0 0 0;
      font-size: 12px;
      color: var(--muted);
    }

    /* ===== Quick Actions Panel ===== */
    .quick-actions{
      display: none;
      gap: 8px;
      padding: 10px 12px;
      background: #f8fafc;
      border: 1px solid var(--border);
      border-radius: 10px;
      margin-bottom: 12px;
      flex-wrap: wrap;
      align-items: center;
    }
    .quick-actions.visible{ display: flex; }
    .quick-btn{
      padding: 8px 14px;
      border-radius: 8px;
      border: 1px solid var(--border);
      background: #fff;
      color: #374151;
      font-weight: 600;
      font-size: 12px;
      cursor: pointer;
      transition: all 0.15s;
    }
    .quick-btn:hover{ background: #f3f4f6; }
    .quick-btn.primary{ background: #6b1d2a; color: #fff; border-color: #6b1d2a; }
    .quick-btn.success{ background: #16a34a; color: #fff; border-color: #16a34a; }
    .quick-btn.danger{ background: #dc2626; color: #fff; border-color: #dc2626; }
    .quick-btn:disabled{ opacity: 0.5; cursor: not-allowed; }

    /* ===== Autosave Status ===== */
    .autosave-status{
      font-size: 12px;
      font-weight: 600;
      color: #9ca3af;
      padding: 4px 6px;
      border-radius: 6px;
      transition: all 0.3s ease;
    }
    .autosave-status.saved{
      color: #059669;
      background: #d1fae5;
    }
    .autosave-status.offline{
      color: #dc2626;
      background: #fee2e2;
    }

    /* ===== Question Guide Panel ===== */
    .question-guide{
      display: none;
      background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
      border: 1px solid #38bdf8;
      border-radius: 10px;
      padding: 10px 12px;
      margin-bottom: 12px;
    }
    .question-guide.visible{ display: block; }
    .question-guide-header{
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 8px;
    }
    .question-guide-title{
      font-size: 12px;
      font-weight: 700;
      color: #0369a1;
    }
    .question-guide-close{
      background: none;
      border: none;
      color: #64748b;
      cursor: pointer;
      font-size: 16px;
      padding: 2px 6px;
    }
    .question-guide-items{
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }
    .question-guide-item{
      padding: 6px 12px;
      border-radius: 16px;
      border: 1px solid #7dd3fc;
      background: #fff;
      color: #0284c7;
      font-size: 12px;
      cursor: pointer;
      transition: all 0.15s;
    }
    .question-guide-item:hover{
      background: #0ea5e9;
      color: #fff;
      border-color: #0ea5e9;
    }
    .question-guide-item[data-category="teória"]{ border-color: #a78bfa; color: #7c3aed; }
    .question-guide-item[data-category="teória"]:hover{ background: #7c3aed; color: #fff; }
    .question-guide-item[data-category="cvičenia"]{ border-color: #34d399; color: #059669; }
    .question-guide-item[data-category="cvičenia"]:hover{ background: #059669; color: #fff; }
    .question-guide-item[data-category="postup"]{ border-color: #fbbf24; color: #d97706; }
    .question-guide-item[data-category="postup"]:hover{ background: #d97706; color: #fff; }
    .question-guide-item[data-category="tréning"]{ border-color: #22c55e; color: #16a34a; }
    .question-guide-item[data-category="tréning"]:hover{ background: #16a34a; color: #fff; }

    /* ===== Training Timeline ===== */
    .timeline-panel{
      background: #fff;
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 12px 14px;
      margin-bottom: 12px;
    }
    .timeline-header{
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;
    }
    .timeline-header h4{
      margin: 0;
      font-size: 13px;
      font-weight: 700;
      color: #374151;
    }
    .timeline-items{
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }
    .timeline-item{
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 6px 10px;
      background: #f1f5f9;
      border-radius: 6px;
      font-size: 11px;
    }
    .timeline-item-time{
      color: #64748b;
      font-weight: 600;
    }
    .timeline-item-label{
      color: #334155;
      font-weight: 500;
    }
    .timeline-item.video_sent{ background: #dcfce7; }
    .timeline-item.video_archived{ background: #dbeafe; }

    /* ===== Video Status Buttons ===== */
    .video-status-panel{
      display: flex;
      gap: 10px;
      margin-top: 8px;
      padding-top: 8px;
      border-top: 1px solid var(--border);
    }
    .video-btn{
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 8px 12px;
      border-radius: 8px;
      border: 1px solid var(--border);
      background: #fff;
      color: #374151;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.15s;
    }
    .video-btn:hover{ background: #f8fafc; }
    .video-btn.checked{ background: #dcfce7; border-color: #22c55e; color: #166534; }
    .video-btn .check-icon{ width: 16px; height: 16px; }
    
    /* ===== Mobile Improvements ===== */
    @media (max-width: 768px) {
      .mode-btn { 
        padding: 12px 16px; 
        min-height: 44px;
        font-size: 14px;
      }
      .header { 
        flex-wrap: wrap; 
        padding: 12px;
        gap: 8px;
      }
      .header-left { flex: 1 1 100%; }
      .title h1 { font-size: 16px; }
      .title .sub { font-size: 11px; }
      .trainer { 
        font-size: 12px;
        position: absolute;
        top: 8px;
        right: 8px;
      }
      #log { 
        max-height: calc(100vh - 380px) !important;
        min-height: 200px;
      }
      .session-panel { padding: 12px; }
      .session-panel label { font-size: 13px; }
      .session-panel input, 
      .session-panel textarea { 
        font-size: 16px !important; 
        padding: 12px !important;
      }
      button { min-height: 44px; }
      .cards-modal-content { 
        max-width: 95vw !important; 
        margin: 10px;
      }
      .cards-modal-body { padding: 16px !important; }
    }
    
    /* ===== Tooltip Improvements ===== */
    .mode-btn[title]:hover::after {
      content: attr(title);
      position: absolute;
      top: 100%;
      left: 50%;
      transform: translateX(-50%);
      padding: 8px 12px;
      background: #1f2937;
      color: #fff;
      font-size: 12px;
      font-weight: 400;
      border-radius: 6px;
      white-space: nowrap;
      z-index: 1000;
      margin-top: 6px;
      box-shadow: 0 2px 8px rgba(0,0,0,.2);
    }
    .mode-btn { position: relative; }
    
    /* ===== Structured Response Formatting ===== */
    .response-section {
      margin-bottom: 16px;
      padding: 12px;
      background: #f8fafc;
      border-radius: 10px;
      border-left: 3px solid var(--case-bg);
    }
    .response-section-title {
      font-weight: 700;
      color: #374151;
      margin-bottom: 8px;
      font-size: 14px;
    }
    .response-section-edu { border-left-color: var(--edu-bg); }
    .response-bullet {
      display: block;
      padding: 4px 0;
      padding-left: 16px;
      position: relative;
    }
    .response-bullet::before {
      content: "•";
      position: absolute;
      left: 0;
      color: #6b7280;
    }
  .profile-tab{
    flex:1; padding:12px 16px; border:none; background:transparent; cursor:pointer;
    font-size:14px; color:#6b7280; border-bottom:2px solid transparent;
  }
  .profile-tab.active{ color:#6b1d2a; border-bottom-color:#6b1d2a; font-weight:600; }
  .profile-tab:hover{ background:#f9fafb; }
  .recommendation-card{
    background:#fff; border:1px solid var(--border); border-radius:12px; padding:16px; margin-bottom:12px;
  }
  .recommendation-card.high{ border-left:4px solid #dc2626; }
  .recommendation-card.medium{ border-left:4px solid #f59e0b; }
  .recommendation-card.low{ border-left:4px solid #22c55e; }
  .recommendation-title{ font-weight:600; font-size:14px; color:#111827; margin-bottom:6px; }
  .recommendation-desc{ font-size:13px; color:#6b7280; margin-bottom:8px; }
  .recommendation-action{ font-size:12px; color:#2563eb; background:#eff6ff; padding:8px 12px; border-radius:6px; display:inline-block; }

/* ===== MOBILE RESPONSIVE FIXES (overrides) ===== */
@media (max-width: 768px) {

  /* --- Header --- */
  .header {
    flex-wrap: wrap;
    padding: 8px 10px;
    gap: 4px;
    align-items: flex-start;
  }
  .header-left {
    flex: 1 1 100%;
    min-width: 0;
  }
  .title h1 {
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
  .title .sub { font-size: 10px; }

  /* Right side of header — allow wrapping, tighten gap */
  .header > div:last-child {
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
  }

  /* Trainer info box — static (not absolute), compact */
  .trainer {
    position: static !important;
    font-size: 12px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
  }

  /* Header action buttons — compact on mobile */
  #btnReservioToggle,
  #btnDayPlanToggle,
  #btnNotifications,
  #btnThemeToggle {
    padding: 5px 8px;
    font-size: 12px;
    min-height: 32px;
  }
  #btnSwitchToAdmin,
  #btnLogout {
    padding: 5px 8px;
    font-size: 12px;
    min-height: 32px;
    margin-left: 0 !important;
  }

  /* Hide "Tmavý" label text on mobile — keep just the moon icon */
  #themeLabel { display: none; }

  /* --- Mode bar --- */
  .mode-bar {
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 10px;
  }
  .mode-left {
    flex: 1 1 100%;
    min-width: 0;
  }
  .mode-title {
    font-size: 12px;
  }
  .mode-actions {
    flex: 1 1 auto;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-start;
  }
  .mode-btn {
    font-size: 12px;
    padding: 6px 10px;
    min-height: 34px;
  }

  /* Override the blanket button min-height for mode/header buttons */
  .mode-btn,
  #btnReservioToggle,
  #btnDayPlanToggle,
  #btnNotifications,
  #btnThemeToggle,
  #btnSwitchToAdmin,
  #btnLogout {
    min-height: 34px !important;
  }

  /* --- Session tabs: horizontal scroll on mobile --- */
  .session-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    padding-bottom: 3px;
    scrollbar-width: none;
  }
  .session-tabs::-webkit-scrollbar {
    display: none;
  }
  .session-tab {
    flex: 0 0 auto;
    min-width: max-content;
    padding: 8px 12px;
    font-size: 12px;
    min-height: 36px !important;
    white-space: nowrap;
  }
}


/* ===== PERMANENT RIGHT NAV SIDEBAR ===== */
#navSidebar {
  position: fixed;
  right: 0;
  top: 0;
  height: 100vh;
  width: 168px;
  background: var(--card, #fff);
  border-left: 1px solid var(--border, #e5e7eb);
  overflow-y: auto;
  z-index: 150;
  display: flex;
  flex-direction: column;
  padding-bottom: 20px;
  scrollbar-width: thin;
  scrollbar-color: #e5e7eb transparent;
}
#navSidebar::-webkit-scrollbar { width: 4px; }
#navSidebar::-webkit-scrollbar-thumb { background: #e5e7eb; border-radius: 2px; }

.nsb-top-spacer { height: 16px; flex-shrink: 0; }

.nsb-group-label {
  font-size: 9px;
  font-weight: 700;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  padding: 8px 12px 2px;
  flex-shrink: 0;
}

.nsb-item {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 12px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: #111827;
  text-decoration: none;
  transition: background 0.1s;
  flex-shrink: 0;
  border: none;
  background: none;
  width: 100%;
  box-sizing: border-box;
  text-align: left;
}
.nsb-item:hover { background: #f3f4f6; }
.nsb-item span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.nsb-sep {
  height: 1px;
  background: #e5e7eb;
  margin: 4px 12px;
  flex-shrink: 0;
}

/* Shift header & body left so nothing hides under sidebar */
.header  { padding-right: calc(168px + 20px) !important; }
.body    { padding-right: calc(168px + 20px) !important; }

/* Mobile sidebar toggle button */
#navSidebarToggle { display: none; }

/* Mobile backdrop */
#navSidebarBackdrop { display: none; }

/* Dark mode */
[data-theme="dark"] #navSidebar            { background: var(--card); border-color: var(--border); }
[data-theme="dark"] .nsb-item              { color: var(--text); }
[data-theme="dark"] .nsb-item:hover        { background: #374151; }
[data-theme="dark"] .nsb-sep               { background: var(--border); }
[data-theme="dark"] .nsb-group-label       { color: #6b7280; }
[data-theme="dark"] #navSidebar::-webkit-scrollbar-thumb { background: #4b5563; }

/* Mobile: sidebar slides in, toggle button appears */
@media (max-width: 900px) {
  #navSidebar {
    transform: translateX(100%);
    transition: transform 0.25s ease;
    z-index: 350;
  }
  #navSidebar.open {
    transform: translateX(0);
    box-shadow: -6px 0 28px rgba(0,0,0,0.22);
  }
  #navSidebarBackdrop.visible {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.28);
    z-index: 340;
  }
  #navSidebarToggle {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    bottom: 24px;
    left: 16px;
    z-index: 3200;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #6b1d2a;
    color: #fff;
    border: none;
    font-size: 22px;
    cursor: pointer;
    box-shadow: 0 4px 18px rgba(107,29,42,0.5);
    transition: background 0.15s;
  }
  #navSidebarToggle:hover { background: #8B1538; }
  .header { padding-right: 18px !important; }
  .body   { padding-right: 18px !important; }
  /* move toasts to right side so they don't overlap hamburger (left:16px) */
  #liveToastContainer { left: auto !important; right: 80px !important; }
}
/* ===== END NAV SIDEBAR ===== */