/* ---- Layout skeleton ---------------------------------- */
    .history-panel        { flex: 0 0 18rem; display:flex; height:calc(100vh - 10rem); }
    .history-box          { flex:1 1 auto; overflow-y:auto; }
    .clarify-panel        { flex:1 1 0; display:flex; flex-direction:column; height:calc(100vh - 10rem); }

    /* ---- Control strip at top ----------------------------- */
    .clarify-controls {
      display:flex;
      flex-wrap:wrap;
      gap:0.75rem;
      align-items:center;
      margin-bottom:1rem;
    }
    .clarify-controls select,
    .clarify-controls input,
    .clarify-controls button {
      background:linear-gradient(145deg, rgba(4, 30, 44, 0.66), rgba(2, 12, 24, 0.54));
      color:#dffcff;
      border:1px solid var(--pro-border);
      padding:0.6rem 1rem;
      border-radius:10px;
      font-family:var(--font);
      font-size:0.9rem;
      backdrop-filter:blur(calc(var(--pro-glass-blur) * 0.45));
      -webkit-backdrop-filter:blur(calc(var(--pro-glass-blur) * 0.45));
      box-shadow:0 12px 24px -16px rgba(0, 0, 0, 0.75);
      transition:background 0.25s ease, border-color 0.25s ease, transform 0.2s ease;
    }

    .clarify-controls button:hover,
    .clarify-controls select:hover,
    .clarify-controls input:hover {
      border-color:var(--accent);
      background:linear-gradient(145deg, rgba(6, 38, 54, 0.78), rgba(2, 12, 24, 0.62));
      transform:translateY(-1px);
    }
    .clarify-controls input { flex:1 1 160px; min-width:120px; }

    /* Clarify page – dark dropdowns */
    body.clarify-page select,
    body.clarify-page option{
    background:#000;
    color:var(--accent);
    border:1px solid rgba(0,255,255,.3);
   }

    /* ---- Output box --------------------------------------- */
    #clarifyOutput {
      flex:1 1 auto;
      overflow:auto;
      background:linear-gradient(155deg, rgba(3, 18, 28, 0.68), rgba(2, 10, 20, 0.52));
      padding:1rem;
      border-radius:14px;
      white-space:pre-wrap;
      word-break:break-word;
      border:1px solid var(--pro-border-soft);
      box-shadow:0 16px 32px -20px rgba(0,0,0,0.7);
      backdrop-filter:blur(calc(var(--pro-glass-blur) * 0.5));
      -webkit-backdrop-filter:blur(calc(var(--pro-glass-blur) * 0.5));
    }
    .action-buttons {
      display:flex;
      justify-content:space-between;
      margin-top:1rem;
      gap:1rem;
    }
    .hidden { display:none !important; }

      /* History Tab */
    .history-box .audit-card{
      margin-bottom:5px;   /* visual breath */
    }

      /* history column – match the clarify-panel bottom gap */
      .history-panel .module-box{
        flex: 1 1 0;                      /* keep it flexible */
        height: calc(100% - 0rem);        
        display: flex;
        flex-direction: column;
      }
    
    /* Clarify-page — give the history rail a 2 rem bottom gap */
    .history-panel{
      padding-bottom: 2rem;   /* matches .module-box padding on the right */
      box-sizing: border-box; /* makes padding subtract from the set height */
    }

    /* Mobile stack */
    @media(max-width:768px){
      .history-panel{ height:calc(100vh - 10rem); }
      .clarify-panel{ height:auto; }
    }

    /* Clarify desktop – make history rail flush with output box */
@media (min-width: 769px){
  .clarify-page .history-panel{
    padding-bottom: 0;   /* remove the mobile buffer */
  }
  .clarify-page .history-panel .module-box{
    height: 100%;
  }
}

/* === Inline Styles Moved to CSS === */
.user-btn { margin-left: .5rem; }
.flex-column { display: flex; flex-direction: column; }
.tone-label { display: none; }
.output-note { color: #888; }