/* responsive.css - overrides pre 14" notebooky (1366x768 až 1600x900) */
/* Pridáva sa ako POSLEDNÝ stylesheet - len media query overrides, nič globálne */

/* ── 14" notebooky: efektívna šírka ~1093–1366px pri 100–125% scale ── */
@media screen and (max-width: 1400px) {

  /* SIDEBAR - zúženie */
  .sidebar {
    width: 16vw;
    min-width: 220px;
    max-width: 280px;
  }

  .sidebar-header {
    padding: 12px 14px;
  }

  .sidebar-header h2 {
    font-size: 15px;
  }

  .sidebar-menu {
    max-height: 35vh;
  }

  .menu-item {
    height: 25px;
  }

  .menu-item > span:nth-child(2) {
    font-size: 0.82rem;
  }

  /* Nastavenia/Settings – názov vždy viditeľný (ikona + text) */
  .sidebar-bottom-block .menu-item {
    overflow: visible;
  }
  .sidebar-bottom-block .menu-item > span:nth-child(2) {
    min-width: 4em;
    overflow: visible;
    text-overflow: clip;
    display: block !important;
    visibility: visible !important;
    color: #e0e0e0;
  }
  #sidebarSettingsBtn > span:nth-child(2) {
    min-width: 4em;
    color: #e0e0e0;
  }

  .chat-history-section {
    flex: 1;
    min-height: 0;
  }

  .chat-history-section > .chat-history-content {
    padding-left: 5px;
    padding-right: 5px;
  }

  /* Chat History ITEM: v .chat-history-actions skryť ikonky, zobraziť tri bodky + mini menu (ikonka + title) */
  .chat-history-item {
    overflow: visible;
  }

  .chat-history-item:has(.chat-history-item-mini-menu.is-open) {
    position: relative;
    z-index: 1001;
  }

  .chat-history-actions > .chat-action-btn {
    display: none !important;
  }

  .chat-history-actions > .chat-history-item-menu-wrap {
    display: flex !important;
    position: relative;
    align-items: center;
    box-sizing: border-box;
  }

  .chat-history-item-menu-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    background: #252525;
    border: 1px solid #333;
    border-radius: 4px;
    color: #888;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
  }

  .chat-history-item-menu-trigger:hover {
    background: #333;
    color: #4CAF50;
  }

  .chat-history-item-mini-menu {
    display: none;
    position: fixed;
    margin-top: 2px;
    min-width: 0;
    padding: 4px 0;
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    z-index: 10001;
    pointer-events: auto;
    box-sizing: border-box;
    /* left, top, width sa nastavujú v JS podľa sidebara a triggera */
  }

  .chat-history-item-mini-menu.is-open {
    display: block;
    pointer-events: auto;
  }

  .chat-history-item-mini-menu-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 6px 12px;
    background: none;
    border: none;
    color: #e0e0e0;
    font-size: 12px;
    text-align: left;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
  }

  .chat-history-item-mini-menu-btn span {
    pointer-events: none;
  }

  .chat-history-item-mini-menu-btn:hover {
    background: #252525 !important;
    color: #4CAF50 !important;
  }

  .chat-history-item-mini-menu-btn.delete:hover {
    color: #f44336 !important;
  }

  .chat-history-item-mini-menu-icon {
    font-size: 12px;
    flex-shrink: 0;
  }

  /* HEADER - zníženie výšky */
  .header {
    padding: 9px 14px;
  }

  .header-title h1 {
    font-size: 18px;
  }

  .header-title .subtitle {
    font-size: 11px;
  }

  .header-status {
    gap: 10px;
  }

  .status-item .value {
    font-size: 12px;
  }

  /* SESSION BAR - kompaktnejší */
  .session-bar {
    padding: 6px 14px;
  }

  .session-info {
    gap: 10px;
    font-size: 11px;
  }

  /* GATE7 TASKRECORD BAR */
  .gate7-taskrecord-bar {
    padding: 4px 10px;
    font-size: 0.72rem;
  }

  #gate7ModuleIndicator {
    width: 180px;
    min-width: 180px;
    max-width: 180px;
  }

  .gate7-next-action-card {
    min-width: 150px;
    padding: 4px 8px;
  }

  .gate7-step {
    width: 20px;
    height: 20px;
    font-size: 0.72rem;
  }

  /* CHAT AREA - menší padding */
  .chat-area {
    padding: 12px 14px;
  }

  .message {
    max-width: 88%;
    padding: 10px;
  }

  /* INPUT AREA */
  .input-area {
    padding: 10px 14px;
  }

  .input-field {
    font-size: 13px;
    min-height: 48px;
  }

  .send-btn {
    padding: 8px 14px;
    font-size: 13px;
  }

  /* RIGHT PANEL */
  .right-panel {
    width: 230px;
  }

  .right-panel-section {
    padding: 10px 12px;
  }

  /* MODULES GRID */
  .modules-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
  }

  .module-card {
    padding: 14px;
  }

  /* RELEASE BANNER */
  .klllm-release-banner {
    font-size: 9px;
    padding: 3px 12px;
    gap: 8px 14px;
  }
}

/* ── Veľmi malé notebooky / 125% scale: efektívna šírka < 1100px ── */
@media screen and (max-width: 1100px) {

  .sidebar {
    min-width: 180px;
    max-width: 220px;
  }

  .header-title h1 {
    font-size: 15px;
  }

  /* Skryť menej dôležité status items */
  .header-status .status-item:nth-child(n+3) {
    display: none;
  }

  .right-panel {
    width: 200px;
  }

  #gate7ModuleIndicator {
    width: 140px;
    min-width: 140px;
    max-width: 140px;
  }

  .gate7-next-action-card {
    min-width: 120px;
  }

  /* Session info - skryť menej dôležité položky */
  .session-info span:nth-child(n+4) {
    display: none;
  }
}

/* ── Fix: scrollovateľné view kontajnery (Settings, Archive, Modules, Analytics) ── */
@media screen and (max-width: 1400px) {

  /* Hlavný scroll wrapper pre všetky view */
  .view-container.active {
    overflow-y: auto;
    overflow-x: hidden;
  }

  /* Settings view – využíva celú výšku, scroll je v .settings-content-pane */
  #analyticsView,
  #archiveView,
  #modulesView,
  #promptModeView {
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 100%;
  }

  /* Settings tabs content */
  .settings-content.active {
    overflow-y: auto;
    padding-bottom: 30px;
  }

  /* Settings view – vnútorný layout bez max-height, aby zaberal celú výšku */
  #settingsView > div {
    padding: 20px 30px !important;
  }

  /* Gemini model list - zmenšiť na malých obrazovkách */
  #geminiModelSelection > div[style*="max-height"] {
    max-height: 180px !important;
  }
}

@media screen and (max-width: 1100px) {
  #settingsView > div {
    padding: 14px 16px !important;
  }

  #geminiModelSelection > div[style*="max-height"] {
    max-height: 130px !important;
  }
}

/* Settings - pravý panel využíva celú šírku */
#settingsView > div {
  width: 100%;
  max-width: 100%;
}

#settingsView > div > div:last-child {
  flex: 1;
  min-width: 0;
  width: 100%;
}

#promptModeSettingsContent,
#archiveSettingsContent,
#modulesSettingsContent {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}