/* Feature Preview / AI Detector Tool */
/*.feature-preview {*/
/*    width: min(90%, 1100px);*/
/*    aspect-ratio: auto;*/
/*    min-height: 500px;*/
/*    background-color: var(--color-white);*/
/*    border-radius: 24px;*/
/*    position: absolute;*/
/*    bottom: 0;*/
/*    left: 50%;*/
/*    transform: translate(-50%, 50%);*/
/*    z-index: 10;*/
/*    box-shadow: 0 40px 80px rgba(0,0,0,0.2);*/
/*    border: 1px solid rgba(0,0,0,0.05);*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*}*/

/*.ai-detector-tool {*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    height: 100%;*/
/*    width: 100%;*/
/*    overflow: hidden;*/
/*}*/

/*.tool-header {*/
/*    display: flex;*/
/*    justify-content: space-between;*/
/*    align-items: center;*/
/*    padding: 16px 24px;*/
/*    border-bottom: 1px solid var(--color-border);*/
/*    background: #f8fafc;*/
/*}*/

/*.tool-tabs {*/
/*    display: flex;*/
/*    gap: 8px;*/
/*}*/

/*.tool-tab {*/
/*    padding: 8px 16px;*/
/*    border-radius: 6px;*/
/*    border: none;*/
/*    background: transparent;*/
/*    font-weight: 600;*/
/*    font-size: 0.9rem;*/
/*    color: var(--color-text-light);*/
/*    cursor: pointer;*/
/*    transition: all 0.2s ease;*/
/*}*/

/*.tool-tab.active {*/
/*    background: var(--color-white);*/
/*    color: var(--color-primary);*/
/*    box-shadow: 0 2px 4px rgba(0,0,0,0.05);*/
/*}*/

/*.stat-item {*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    align-items: flex-end;*/
/*}*/

/*.stat-label {*/
/*    font-size: 0.75rem;*/
/*    font-weight: 700;*/
/*    color: var(--color-text-light);*/
/*    text-transform: uppercase;*/
/*}*/

/*.stat-value {*/
/*    font-size: 1.25rem;*/
/*    font-weight: 800;*/
/*    color: var(--color-primary);*/
/*}*/

/*.tool-body {*/
/*    display: flex;*/
/*    flex: 1;*/
/*    min-height: 400px;*/
/*}*/

/*.input-container {*/
/*    flex: 1;*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    border-right: 1px solid var(--color-border);*/
/*    padding: 20px;*/
/*}*/

/*#ai-input {*/
/*    flex: 1;*/
/*    width: 100%;*/
/*    border: none;*/
/*    resize: none;*/
/*    font-family: var(--font-body);*/
/*    font-size: 1rem;*/
/*    color: var(--color-text-dark);*/
/*    outline: none;*/
/*}*/

/*.input-footer {*/
/*    display: flex;*/
/*    justify-content: space-between;*/
/*    align-items: center;*/
/*    padding-top: 16px;*/
/*    border-top: 1px solid var(--color-border);*/
/*}*/

/*#word-count {*/
/*    font-size: 0.85rem;*/
/*    color: var(--color-text-light);*/
/*}*/

/*.btn-analyze {*/
/*    background-color: var(--color-accent);*/
/*    color: var(--color-primary);*/
/*    padding: 10px 20px;*/
/*    font-size: 0.9rem;*/
/*}*/

/*.output-container {*/
/*    flex: 1;*/
/*    padding: 20px;*/
/*    overflow-y: auto;*/
/*    background: #fafafa;*/
/*    position: relative;*/
/*}*/

/*.output-placeholder {*/
/*    position: absolute;*/
/*    top: 50%;*/
/*    left: 50%;*/
/*    transform: translate(-50%, -50%);*/
/*    text-align: center;*/
/*    color: var(--color-muted);*/
/*}*/

/*.output-placeholder ion-icon {*/
/*    font-size: 3rem;*/
/*    margin-bottom: 12px;*/
/*}*/

/* Highlighting Classes */
/*.sentence {*/
/*    display: inline;*/
/*    padding: 2px 0;*/
/*    transition: background 0.3s ease;*/
/*    cursor: pointer;*/
/*}*/

/*.ai-highlight {*/
/*    background-color: rgba(255, 107, 107, 0.2);*/
/*    border-bottom: 2px solid rgba(255, 107, 107, 0.5);*/
/*    color:#000;*/
/*}*/

/*.human-highlight {*/
/*    background-color: rgba(101, 224, 118, 0.2);*/
/*    border-bottom: 2px solid rgba(101, 224, 118, 0.5);*/
/*    color:#000;*/
/*}*/

/*@media (max-width: 768px) {*/
/*    .tool-body {*/
/*        flex-direction: column;*/
/*    }*/
/*    .input-container {*/
/*        border-right: none;*/
/*        border-bottom: 1px solid var(--color-border);*/
/*        height: 300px;*/
/*    }*/
/*    .feature-preview {*/
/*        min-height: 600px;*/
/*    }*/
/*}*/


  /**, *::before, *::after {*/
  /*  box-sizing: border-box;*/
  /*  margin: 0;*/
  /*  padding: 0;*/
  /*}*/

  /*body {*/
  /*  background: #0d2117;*/
  /*  font-family: system-ui, sans-serif;*/
  /*  display: flex;*/
  /*  align-items: center;*/
  /*  justify-content: center;*/
  /*  min-height: 100vh;*/
  /*  padding: 40px 20px;*/
  }

  .detector-box {
    width: min(100%, 1100px);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255,255,255,0.08);
  }

  /* THE FIX: table-layout forces strict equal columns */
  .tool-body {
    display: table;
    width: 100%;
    min-height: 500px;
    table-layout: fixed; /* ← THIS is the magic: enforces equal columns no matter what */
  }

  .input-container,
  .right-panel {
    display: table-cell; /* ← table-cell always respects table-layout: fixed */
    width: 50%;
    vertical-align: top;
  }

  /* ===== LEFT PANEL ===== */
  .input-container {
    background: #fafff8;
    border-right: 1px solid #e2e8e0;
    padding: 0;
  }

  /* Wrap textarea in a flex column */
  .input-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 500px;
  }

 #ai-input {
    flex: 1;
    width: 100%;
    min-height: 400px;
    border: none;
    resize: none;
    outline: none;
    padding: 24px;
    font-size: 18px;
    color: #1a2e1a;
    background: #ffff;
    font-family: inherit;
    line-height: 1.5;
  }

  #ai-input::placeholder {
    color: #9ab09a;
  }

  /*.input-footer {*/
  /*  display: flex;*/
  /*  align-items: center;*/
  /*  justify-content: space-between;*/
  /*  gap: 12px;*/
  /*  padding: 20px 20px;*/
  /*   justify-content: space-between;*/
  /*  border-top: 1px solid #e2e8e0;*/
  /*  background: #ffff;*/
  /*}*/

  /*#word-count {*/
  /*  font-size: 0.85rem;*/
  /*  color: #7a9a7a;*/
  /*}*/
.input-footer {
  display: flex;
  align-items: center;
  padding: 20px 24px;
  border-top: 1px solid #e2e8e0;
  background: #fff;
  min-height: 64px;
}

/* word count stays LEFT */
#word-count {
  margin-right: auto;
  font-size: 0.85rem;
  color: #7a9a7a;
}

/* keep buttons close */
#reset-btn {
  margin-right: 6px;
}
  .btn-analyze {
    background: #4cde6a;
    color: #0d2117;
    padding: 12px 24px;
    font-size: 0.9rem;
    font-weight: 700;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    letter-spacing: 0.01em;
  }

  .btn-analyze:hover {
    background: #3dcc5a;
  }

  .btn-reset {
    background: #fff;
    border: 1px solid #d0dbd0;
    border-radius: 4px;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 1rem;
    color: #7a9a7a;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* ===== RIGHT PANEL ===== */
  .right-panel {
    background: #f5faf5;
    display: table-cell;
  }

  .right-inner {
    display: flex;
    flex-direction: column;
    min-height: 500px;
  }

  /*.tool-header {*/
  /*  padding: 16px 24px;*/
    /*border-bottom: 1px solid #e2e8e0;*/
  /*  display: flex;*/
  /*  justify-content: flex-end;*/
  /*  background: #fff;*/
  /*}*/
.tool-header {
  padding: 16px 24px;
   justify-content: flex-end;
  display: flex;
  justify-content: flex-end;
  background: #fff;

  border-top: 1px solid #e2e8e0; /* ← match input-footer */
}
  .stat-item {
    text-align: right;
  }

  .stat-label {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #7a9a7a;
    margin-bottom: 2px;
  }

  .stat-value {
    display: block;
    font-size: 1.8rem;
    font-weight: 600;
    color: #0d2117;
    line-height: 1;
  }

  /*.output-container {*/
  /*  flex: 1;*/
  /*  padding: 24px;*/
  /*  overflow-y: auto;*/
  /*  position: relative;*/
  /*  min-height: 420px;*/
  /*  background: #ffff;*/
  /*  text-align: left;*/
  /*  margin-bottom:  2px solid #000;*/
     
  /*}*/
.output-container {
    flex: 1;
    padding: 24px;
    overflow-y: auto;
    position: relative;
    height: 430px;        /* fixed height so scroll kicks in */
    max-height: 430px;    /* cap it */
    background: #fff;
    text-align: left;
}
  .output-placeholder {
    position: absolute;
    top: 56%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #aac5aa;
  }

  .output-placeholder svg {
    width: 48px;
    height: 48px;
    margin-bottom: 12px;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }

  .output-placeholder p {
    font-size: 0.95rem;
    line-height: 1.5;
  }

  /* ===== Responsive ===== */
  @media (max-width: 768px) {
    .tool-body {
      display: flex;
      flex-direction: column;
    }
    .input-container,
    .right-panel {
      width: 100%;
      display: block;
    }
    .input-container {
      border-right: none;
      border-bottom: 1px solid #e2e8e0;
    }
  }
  
  
  /*/*/
  
  
 /*Highlighting Classes */
.sentence {
    display: inline;
    padding: 2px 0;
    transition: background 0.3s ease;
    cursor: pointer;
}

.ai-highlight {
    background-color: rgba(255, 107, 107, 0.2);
    border-bottom: 2px solid rgba(255, 107, 107, 0.5);
    color:#000;
}

.human-highlight {
    background-color: rgba(101, 224, 118, 0.2);
    border-bottom: 2px solid rgba(101, 224, 118, 0.5);
    color:#000;
}