/* Zorqelia desktop layout v3 — one continuous canvas, no boxed-section look. */
@media (min-width: 1101px) {
  body:not(.zordex-app-mode) .app-shell {
    grid-template-columns: 240px minmax(0, 1fr);
  }

  body:not(.zordex-app-mode) .sidebar {
    border-right: 0;
    padding: 14px 12px;
    gap: 9px;
  }

  body:not(.zordex-app-mode) .nav-item,
  body:not(.zordex-app-mode) .chat-item,
  body:not(.zordex-app-mode) .profile-menu-button,
  body:not(.zordex-app-mode) .sidebar-model-control {
    border: 0 !important;
    box-shadow: none !important;
  }

  body:not(.zordex-app-mode) .nav-item {
    background: transparent;
    border-radius: 8px;
    padding: 9px 10px;
  }

  body:not(.zordex-app-mode) .nav-item:hover {
    background: rgba(255, 255, 255, 0.045);
  }

  body:not(.zordex-app-mode) .nav-item.active {
    background: rgba(255, 255, 255, 0.075);
  }

  body:not(.zordex-app-mode) .nav-item-upgrade {
    background: rgba(250, 204, 21, 0.045);
  }

  body:not(.zordex-app-mode) .sidebar-model-control {
    margin: 2px 3px 8px;
    padding: 9px 10px;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.03);
  }

  body:not(.zordex-app-mode) .chat-item {
    background: transparent;
    border-radius: 9px;
  }

  body:not(.zordex-app-mode) .chat-item:hover {
    background: rgba(255, 255, 255, 0.035);
  }

  body:not(.zordex-app-mode) .chat-item.active {
    background: rgba(255, 255, 255, 0.065);
  }

  body:not(.zordex-app-mode) .profile-menu-button {
    background: rgba(255, 255, 255, 0.045) !important;
  }

  body:not(.zordex-app-mode) .chat-list-wrap {
    scrollbar-width: none;
  }

  body:not(.zordex-app-mode) .chat-list-wrap::-webkit-scrollbar {
    display: none;
  }

  .chat-main:not(.zordex-active) {
    position: relative;
    grid-template-columns: minmax(0, 1fr) clamp(170px, 11vw, 200px);
    grid-template-rows: minmax(0, 1fr) auto;
    column-gap: 0;
    background: var(--bg);
  }

  /* Do not make the active chat name another page section. The sidebar already shows it. */
  .chat-main:not(.zordex-active) > .chat-header {
    position: absolute;
    z-index: 5;
    top: 12px;
    right: 14px;
    width: auto;
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
    pointer-events: none;
  }

  .chat-main:not(.zordex-active) > .chat-header > div:first-child {
    display: none;
  }

  .chat-main:not(.zordex-active) > .chat-header .header-meta {
    gap: 5px;
    pointer-events: auto;
  }

  .chat-main:not(.zordex-active) > .chat-header .mode-badge {
    border: 0 !important;
    background: rgba(255, 255, 255, 0.045);
    border-radius: 999px;
    padding: 7px 10px;
    color: #aeb7c0;
    font-size: 0.7rem;
    box-shadow: none;
  }

  .chat-main:not(.zordex-active) > .chat-header .token-badge {
    color: #f5f5f5;
    background: rgba(255, 255, 255, 0.065);
  }

  .chat-main:not(.zordex-active) > .conversation-stage {
    grid-column: 1;
    grid-row: 1;
    min-height: 0;
    overflow: hidden;
    background: transparent;
  }

  .chat-main:not(.zordex-active) .conversation-stage > .message-list {
    height: 100%;
    overflow-y: auto;
    padding: 54px max(24px, calc((100% - 860px) / 2)) 28px;
    gap: 12px;
    align-items: stretch;
    scrollbar-width: none;
    scrollbar-gutter: auto;
  }

  .chat-main:not(.zordex-active) .conversation-stage > .message-list::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
  }

  .chat-main:not(.zordex-active) .message {
    width: 100%;
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
    padding: 8px 0;
    border: 0 !important;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none !important;
  }

  .chat-main:not(.zordex-active) .message.assistant {
    align-self: auto;
  }

  .chat-main:not(.zordex-active) .message.user {
    width: auto;
    max-width: min(680px, 78%);
    margin-left: auto;
    margin-right: 0;
    padding: 10px 14px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.075) !important;
  }

  /* Right tools stay, but they are not a second full-height room. */
  .chat-main:not(.zordex-active) > .s6-zorqelia-tools {
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: start;
    display: grid;
    grid-template-columns: 1fr;
    gap: 2px;
    width: auto;
    height: auto;
    max-width: none;
    min-width: 0;
    margin: 0;
    padding: 72px 12px 0 8px;
    overflow: visible;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .chat-main:not(.zordex-active) > .s6-zorqelia-tools::before {
    content: "AI TOOLS";
    display: block;
    margin: 0 7px 8px;
    color: #69727b;
    font-size: 0.61rem;
    font-weight: 800;
    letter-spacing: 0.11em;
  }

  .chat-main:not(.zordex-active) > .s6-zorqelia-tools button {
    width: 100%;
    min-height: 34px;
    padding: 7px 7px;
    border: 0 !important;
    border-radius: 8px;
    background: transparent;
    color: #e8edf1;
    text-align: left;
    box-shadow: none;
    transform: none;
    font-size: 0.78rem;
  }

  .chat-main:not(.zordex-active) > .s6-zorqelia-tools button:hover,
  .chat-main:not(.zordex-active) > .s6-zorqelia-tools button:focus-visible {
    border: 0 !important;
    background: rgba(255, 255, 255, 0.05);
    transform: none;
    outline: none;
  }

  .chat-main:not(.zordex-active) > .composer {
    grid-column: 1;
    grid-row: 2;
    justify-self: center;
    width: min(820px, calc(100% - 48px));
    margin: 0 auto 16px;
    padding: 6px 8px;
    border: 0 !important;
    border-radius: 24px;
    background: #202020;
    box-shadow: none;
  }

  .chat-main:not(.zordex-active) > .composer:focus-within {
    border: 0 !important;
    background: #232323;
    box-shadow: none;
  }

  .chat-main:not(.zordex-active) > .composer textarea {
    border: 0 !important;
    background: transparent !important;
    padding: 9px 10px;
  }

  .chat-main:not(.zordex-active) > .composer .tool-button,
  .chat-main:not(.zordex-active) > .composer .send-button {
    border: 0 !important;
    box-shadow: none !important;
  }

  .chat-main:not(.zordex-active) > .composer .tool-button {
    background: transparent;
  }
}

/* Keep the existing compact/mobile behavior instead of forcing a desktop rail. */
@media (max-width: 1100px) {
  .chat-main:not(.zordex-active) > .s6-zorqelia-tools {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .chat-main:not(.zordex-active) > .s6-zorqelia-tools button {
    border: 0 !important;
    box-shadow: none !important;
  }
}