:root {
      --bottombar-height: 20vh;
      --bg-bottom: #1e1e1e;
      --term-bg: #0a0c0f;
      --accent: #e92929;
      /* vermelho de destaque para barras/progresso */
      --muted: #9aa4ad;
      --konira: #b6b6b6;
      /* cor Konira — usada para 'devsec' */
    }

    .frame-bottom-container {
      box-sizing: border-box;
      height: 100%;
      margin-top: -1px;
      margin-left: -1px;
      border-top: 2px solid #6f0606;
      transform: translateZ(0);
      backface-visibility: hidden;
      will-change: transform;
      transform: scale(1.001);
    }

    .bottom-panel {
      background: var(--bg-bottom);
      border-top: 1px solid rgba(255, 255, 255, 0.03);
      color: #cbd5e1;
      display: flex;
      flex-direction: column;
      font-size: 13px;
      height: 100%;
      box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.02) inset;
      box-sizing: border-box;
      overflow: hidden;
    }

    .bottom-tabs {
      display: flex;
      gap: 12px;
      padding: 8px 12px;
      align-items: center;
      border-bottom: 1px solid rgba(255, 255, 255, 0.02);
      box-sizing: border-box;
      flex: 0 0 auto;
    }

    .tabs-left {
      display: flex;
      gap: 10px;
      align-items: center;
    }

    .tabs-left .tab {
      padding: 6px 8px;
      background: transparent;
      border-radius: 4px;
      text-transform: uppercase;
      letter-spacing: 0.6px;
      color: var(--muted);
      font-weight: 400;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }

    .tabs-left .tab.active {
      color: #ffffff;
      position: relative;
    }

    .tabs-left .tab.active::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: -1px;
      height: 2px;
      background: var(--accent);
      border-radius: 2px 2px 0 0;
    }

    .tabs-right {
      margin-left: auto;
      display: flex;
      gap: 8px;
      align-items: center;
      padding: 0px 12px 0px 0px;
    }

    .tabs-right .icon-btn {
      width: 36px;
      height: 28px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: transparent;
      border: 0;
      cursor: pointer;
      border-radius: 6px;
    }

    .bottom-content {
      display: flex;
      gap: 12px;
      padding: 12px;
      align-items: flex-start;
      overflow: hidden;
      flex: 1 1 auto;
      box-sizing: border-box;
    }

    .bottom-left {
      flex: 1;
      background: #06070a;
      padding: 10px;
      min-height: 56px;
      display: flex;
      flex-direction: column;
      box-sizing: border-box;
      position: relative;
    }

    .terminal {
      background: var(--term-bg);
      color: #ffffff;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, 'Roboto Mono', monospace;
      padding: 12px;
      border-radius: 0px;
      width: 100%;
      min-height: 120px;
      max-height: calc(100% - 24px);
      display: flex;
      flex-direction: column;
      gap: 6px;
      overflow: auto;
      border: 1px solid rgba(255, 255, 255, 0.03);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
      white-space: pre-wrap;
      word-break: break-word;
      font-size: 13px;
      box-sizing: border-box;
      scroll-behavior: auto;
    }

    .term-row {
      display: flex;
      gap: 8px;
      align-items: flex-start;
    }

    .term-row .term-prompt {
      min-width: 220px;
      color: #eaeaea;
      font-weight: 600;
    }

    .term-row .term-output {
      color: #e8e8e8;
      flex: 1;
    }

    .term-row .term-meta {
      color: #cbcbcb;
      min-width: 120px;
      text-align: right;
      font-size: 12px;
    }

    .term-output.warn {
      color: #ffb86b;
      font-weight: 700;
    }

    .kw-devsec {
      color: var(--konira);
      font-weight: 700;
    }

    .kw-konira {
      color: var(--konira);
      font-weight: 800;
    }

    .scroll-to-bottom {
      position: absolute;
      right: 12px;
      bottom: 12px;
      padding: 6px 8px;
      border-radius: 6px;
      background: rgba(255, 255, 255, 0.03);
      color: var(--muted);
      border: none;
      cursor: pointer;
      font-size: 12px;
      display: none;
      z-index: 10;
    }

    .bottom-side {
      width: 240px;
      color: var(--muted);
      font-size: 13px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      box-sizing: border-box;
    }

    .status-bar {
      display: flex;
      gap: 12px;
      align-items: center;
      padding: 8px 12px;
      border-top: 1px solid rgba(255, 255, 255, 0.03);
      color: var(--muted);
      font-size: 13px;
      flex: 0 0 auto;
      box-sizing: border-box;
    }

    .progress-container {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .progress-label {
      min-width: 160px;
      color: var(--muted);
      font-size: 12px;
    }

    .progress {
      background: rgba(255, 255, 255, 0.03);
      border-radius: 6px;
      width: 100%;
      height: 12px;
      overflow: hidden;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
    }

    .progress .fill {
      height: 100%;
      width: 0%;
      background: linear-gradient(90deg, rgba(233, 41, 41, 0.98), rgba(255, 120, 120, 0.85));
      border-radius: 6px;
      transition: width 120ms linear;
    }

    .progress.fast .fill {
      transition-duration: 80ms;
    }

    .progress.complete .fill {
      background: linear-gradient(90deg, rgba(233, 41, 41, 0.98), rgba(255, 120, 120, 0.85));
    }

    pre.ascii {
      margin: 0;
      font-family: inherit;
      font-size: 12px;
      line-height: 1;
      white-space: pre;
    }

    @media (max-width:700px) {
      :root {
        --bottombar-height: 20vh;
      }

      .bottom-side {
        width: 160px;
      }

      .term-row .term-prompt {
        min-width: 160px;
      }
    }



    /* garante que o pre preserve espaçamento e use monospace */
    .konira-ascii-container pre.raw-ascii.ascii {
      font-family: monospace;
      line-height: 1;
      font-size: 0.88rem;
      white-space: pre;
      /* preserva espaços e quebras exatamente como no ASCII */
      margin: 0;
    }