/* --- LAYOUT E ESTRUTURA --- */
#frame { position: fixed; inset: 12px; display: flex; flex-direction: column; overflow: hidden; z-index: 1; }

.logo-area {
  position: absolute; top: 10px; left: calc(var(--hud-w) + var(--gap)); right: 24px;
  display: flex; align-items: center; gap: 15px; z-index: 10; height: 30px; overflow: hidden;
}
.logo-area img { height: 26px; flex-shrink: 0; }

.hud {
  position: absolute; left: 0; top: 80px; bottom: 80px; width: var(--hud-w);
  display: flex; flex-direction: column; align-items: center; gap: 18px; 
  padding-top: 20px; z-index: 40; 
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  /* Sem borda lateral dura, apenas o fim do background */
}

.drawer {
    position: absolute; left: var(--hud-w); top: 80px; bottom: 80px;
    width: 0; background: var(--bg-drawer); 
    
    /* Borda sutil + Sombra flutuante */
    border-right: var(--border-style);
    box-shadow: var(--shadow-float);
    
    border-top-right-radius: var(--radius);
    border-bottom-right-radius: var(--radius);
    
    overflow: hidden; transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 35; display: flex; flex-direction: column; 
    backdrop-filter: blur(12px); /* Blur mais forte */
}
.drawer.open { width: var(--drawer-w); }
.drawer-header { height: 50px; border-bottom: var(--border-style); display: flex; align-items: center; justify-content: center; padding: 0 15px; flex-shrink: 0; position: relative; }
#closeDrawer { position: absolute; right: 12px; }
.drawer-content { flex: 1; padding: 15px; overflow-y: auto; opacity: 0; transition: opacity 0.2s; }
.drawer.open .drawer-content { opacity: 1; }
.mobile-memo-actions { display: none; margin-top: 12px; }
.mobile-only { display: none; }
.desktop-only { display: block; }

/* GATILHO MOBILE */
.mobile-trigger {
    display: none; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 24px; height: 60px; background: var(--color-accent); color: #000;
    border-radius: 0 var(--radius) var(--radius) 0;
    justify-content: center; align-items: center; cursor: pointer; z-index: 50;
    box-shadow: 2px 0 10px rgba(0,0,0,0.5);
}

/* PAINEL CENTRAL RESPONSIVO */
.panel {
  position: absolute; left: 0; right: 0; top: 60px; bottom: 80px;
  padding: 0 20px; overflow-y: auto; overflow-x: hidden;
  display: flex; justify-content: center; z-index: 1;
  background: transparent;
}

#booksView {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--hud-w);
  right: 0;
}

#booksFrame {
  position: absolute;
  inset: 0;
}

.panel.books-active {
  padding: 0;
}

#editorView {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  overflow: visible;
}

#editorWrap {
  position: relative;
  width: 58vw;
  max-width: 860px;
  min-height: 80vh;
  margin-top: 20px;
  overflow: visible;
}

#editor {
  width: 100%;
  min-height: 80vh;
  outline: none; caret-color: var(--color-accent);
  padding-bottom: 100px; line-height: 1.85;
  white-space: pre-wrap; word-break: break-word; overflow-wrap: break-word;
  position: relative;
  z-index: 1;
  overflow: visible;
  max-height: none;
  height: auto;
  text-align: left;
}

/* CONTROLS (Correção de posição e tamanho) */
.controls {
  position: absolute; left: 0; right: 0; bottom: 12px;
  min-height: var(--controls-h); display: flex; justify-content: center;
  z-index: 50; pointer-events: none; 
}

.controls-inner {
  display: flex; align-items: center; gap: 15px; padding: 0 20px;
  background: var(--bg-controls); 
  border: var(--border-style); /* Borda Glass */
  box-shadow: var(--shadow-float); /* Sombra Glass */
  border-radius: var(--radius);
  
  pointer-events: auto;
  
  /* SEGREDO DA LINHA ÚNICA */
  flex-wrap: wrap;
  white-space: nowrap;
  overflow: visible;
  row-gap: 6px;
  column-gap: 10px;
  
  width: auto; max-width: 96vw; /* Ajusta ao conteúdo, mas não passa da tela */
  height: auto;
  min-height: var(--controls-h);
  
  backdrop-filter: blur(12px); 
}
.controls-inner::-webkit-scrollbar { display: none; }

/* MOBILE */
@media (max-width: 900px) {
    .hud { transform: translateX(-100%); background: var(--bg-drawer); border-right: var(--border-style); height: 100%; top: 0; bottom: 0; left: 0; width: 56px; }
    .mobile-trigger { display: flex; }
    .hud.mobile-open { transform: translateX(0); box-shadow: 5px 0 50px rgba(0,0,0,0.5); }
    .drawer { left: 0; width: 0; top: 0; bottom: 0; border-radius: 0; }
    .drawer.open { width: 100vw; }
    #editorWrap { width: 92vw; margin-top: 8px; }
    #booksView { left: 0; }
    .logo-area { display: none; }
    .panel { top: 10px; bottom: 70px; padding: 0 14px; }
    .controls { bottom: 10px; }
    .controls-inner { width: 96vw; max-width: 96vw; padding: 6px 10px; gap: 8px; }
    .controls-inner .status-label { display: none; }
    .controls-inner .btn span { display: none; }
    .controls-inner .btn { padding: 6px; min-width: 30px; }
    .controls-inner .btn-icon { width: 28px; height: 28px; }
    .controls-inner .search-wrapper { min-width: 120px; max-width: 160px; }
    .controls-inner .search-input { font-size: 11px; }
    .mobile-memo-actions { display: block; }
    .mobile-only { display: block; }
    .desktop-only { display: none; }
    body.mobile-lite #editorView { display: none; }
    body.mobile-lite #booksView { display: none; }
    body.mobile-lite .controls { display: none; }
    body.mobile-lite .logo-area { display: none; }
    body.mobile-lite .panel { top: 0; bottom: 0; padding: 0 14px; }
    body.mobile-lite .drawer { left: 0; }
}
