/* ==================================================
   VOICE REMINDER v2
   styles.css

   Human First.
   Voice first.
   Clear context.
   No bloat.
================================================== */


/* ==================================================
   RESET
================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: #f4f5f7;
}

body {
  min-height: 100vh;
  margin: 0;

  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Arial,
    sans-serif;

  color: #17202a;
  background: #f4f5f7;

  line-height: 1.5;
}

button,
input,
textarea,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

img,
svg {
  display: block;
  max-width: 100%;
}

[hidden] {
  display: none !important;
}


/* ==================================================
   VARIABLES
================================================== */

:root {
  --page-bg: #f4f5f7;
  --panel-bg: #ffffff;
  --panel-soft: #f8f9fa;

  --text: #17202a;
  --text-soft: #667085;
  --text-faint: #89919c;

  --line: #dde1e6;
  --line-strong: #c8ced6;

  --primary: #2463eb;
  --primary-dark: #1849b9;
  --primary-soft: #edf3ff;

  --success: #16834b;
  --success-soft: #eaf8f0;

  --warning: #b66a00;
  --warning-soft: #fff5e5;

  --danger: #c33a32;
  --danger-soft: #fff0ef;

  --shadow:
    0 10px 30px
    rgba(23, 32, 42, 0.08);

  --radius-large: 20px;
  --radius: 14px;
  --radius-small: 10px;

  --page-width: 900px;
}


/* ==================================================
   PAGE
================================================== */

.app-shell,
.page-shell,
main {
  width:
    min(
      calc(100% - 32px),
      var(--page-width)
    );

  margin: 0 auto;
}

.app-shell,
.page-shell {
  padding:
    28px
    0
    48px;
}

main {
  padding-bottom: 48px;
}


/* ==================================================
   HEADER
================================================== */

.app-header,
.page-header,
header {
  margin-bottom: 24px;
}

.brand-row,
.header-row {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 16px;
}

.brand,
.app-title {
  margin: 0;

  font-size: 1.15rem;
  font-weight: 800;

  letter-spacing: -0.02em;
}

header h1,
.page-header h1,
.app-header h1 {
  margin:
    0
    0
    6px;

  font-size:
    clamp(
      1.8rem,
      4vw,
      2.6rem
    );

  line-height: 1.08;

  letter-spacing: -0.035em;
}

header p,
.page-header p,
.app-header p {
  max-width: 650px;

  margin: 0;

  color: var(--text-soft);

  font-size: 1rem;
}


/* ==================================================
   MAIN CARD
================================================== */

.panel,
.card,
.voice-panel,
.reminder-panel,
.capture-panel {
  background: var(--panel-bg);

  border:
    1px solid
    var(--line);

  border-radius:
    var(--radius-large);

  box-shadow:
    var(--shadow);
}

.panel,
.reminder-panel {
  padding: 24px;
}

.section {
  margin-top: 24px;
}

.section:first-child {
  margin-top: 0;
}

.section-heading {
  display: flex;

  align-items: flex-end;
  justify-content: space-between;

  gap: 16px;

  margin-bottom: 14px;
}

.section-heading h2,
.section-heading h3 {
  margin: 0;
}

.section-heading p {
  margin:
    3px
    0
    0;

  color:
    var(--text-soft);
}


/* ==================================================
   VOICE CAPTURE
================================================== */

.voice-panel,
.capture-panel {
  padding:
    30px
    24px;

  text-align: center;
}

.voice-panel h2,
.capture-panel h2 {
  margin:
    0
    0
    8px;

  font-size: 1.45rem;

  letter-spacing:
    -0.02em;
}

.voice-panel p,
.capture-panel p {
  max-width: 560px;

  margin:
    0
    auto
    22px;

  color:
    var(--text-soft);
}


/* ==================================================
   CONTEXT CHOICE
================================================== */

.context-section,
.reminder-context,
.voice-context {
  margin:
    4px
    auto
    26px;

  text-align: center;
}

.context-label {
  margin:
    0
    0
    10px;

  color:
    var(--text-soft);

  font-size: 0.85rem;
  font-weight: 700;
}

.context-pills,
.context-options,
.reminder-context-options,
.voice-context-options {
  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  gap: 8px;

  width: 100%;

  margin: 0 auto;
}


/* ==================================================
   CONTEXT PILLS
================================================== */

.context-pill,
.context-button,
[data-context],
[data-reminder-context],
[data-voice-context] {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  min-height: 40px;

  padding:
    8px
    15px;

  border:
    1px solid
    var(--line-strong);

  border-radius: 999px;

  color:
    var(--text-soft);

  background: #ffffff;

  font-size: 0.9rem;
  font-weight: 750;

  line-height: 1;

  white-space: nowrap;

  transition:
    color 0.15s ease,
    background 0.15s ease,
    border-color 0.15s ease,
    transform 0.15s ease;
}

.context-pill:hover,
.context-button:hover,
[data-context]:hover,
[data-reminder-context]:hover,
[data-voice-context]:hover {
  color:
    var(--primary-dark);

  border-color:
    #9fb9f5;

  background:
    #f7faff;
}

.context-pill:active,
.context-button:active,
[data-context]:active,
[data-reminder-context]:active,
[data-voice-context]:active {
  transform:
    translateY(
      1px
    );
}


/* ==================================================
   ACTIVE CONTEXT
================================================== */

.context-pill.active,
.context-pill.selected,
.context-button.active,
.context-button.selected,
[data-context].active,
[data-context][aria-pressed="true"],
[data-reminder-context].active,
[data-reminder-context][aria-pressed="true"],
[data-voice-context].active,
[data-voice-context][aria-pressed="true"] {
  color:
    #ffffff;

  background:
    var(--primary);

  border-color:
    var(--primary);

  box-shadow:
    0 5px 14px
    rgba(36, 99, 235, 0.18);
}


/* ==================================================
   RECORD AREA
================================================== */

.voice-record-area,
.record-area,
.voice-center {
  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  width: 100%;

  margin:
    8px
    auto
    0;
}


/* ==================================================
   RECORD BUTTON

   Deliberately a wide pill rather than a circle.
   It comfortably holds:
   microphone + Record
================================================== */

.voice-button,
.mic-button,
.record-button,
#voice-button,
#record-button {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  gap: 10px;

  width: auto;
  min-width: 176px;
  max-width: 100%;

  height: 66px;

  padding:
    0
    25px;

  margin:
    4px
    auto
    14px;

  border: 0;

  border-radius: 999px;

  color: #ffffff;

  background:
    var(--primary);

  font-size: 1.4rem;
  font-weight: 800;

  line-height: 1;

  letter-spacing:
    -0.015em;

  white-space: nowrap;

  overflow: hidden;

  box-shadow:
    0 10px 24px
    rgba(36, 99, 235, 0.24);

  transition:
    transform 0.15s ease,
    background 0.15s ease,
    box-shadow 0.15s ease;
}

.voice-button:hover,
.mic-button:hover,
.record-button:hover,
#voice-button:hover,
#record-button:hover {
  background:
    var(--primary-dark);

  transform:
    translateY(
      -2px
    );

  box-shadow:
    0 13px 28px
    rgba(36, 99, 235, 0.28);
}

.voice-button:active,
.mic-button:active,
.record-button:active,
#voice-button:active,
#record-button:active {
  transform:
    translateY(
      0
    );
}


/* ==================================================
   LISTENING / RECORDING
================================================== */

.voice-button.listening,
.voice-button.recording,
.mic-button.listening,
.mic-button.recording,
.record-button.listening,
.record-button.recording,
#voice-button.listening,
#voice-button.recording,
#record-button.listening,
#record-button.recording {
  background:
    var(--danger);

  box-shadow:
    0
    0
    0
    7px
    rgba(195, 58, 50, 0.09),

    0
    10px
    25px
    rgba(195, 58, 50, 0.22);
}


/* ==================================================
   RECORD LABEL
================================================== */

.voice-label,
.record-label {
  display: block;

  margin-top: 2px;

  color:
    var(--text);

  font-weight: 700;
}

.voice-help,
.record-help,
.helper-text {
  color:
    var(--text-soft);

  font-size: 0.9rem;
}


/* ==================================================
   VOICE STATUS
================================================== */

.voice-status,
.status-message,
#voice-status {
  min-height: 28px;

  margin-top: 12px;

  color:
    var(--text-soft);

  font-weight: 650;

  text-align: center;
}

.voice-status.listening,
.status-message.listening,
#voice-status.listening {
  color:
    var(--danger);
}

.voice-status.success,
.status-message.success,
#voice-status.success {
  color:
    var(--success);
}

.voice-status.error,
.status-message.error,
#voice-status.error {
  color:
    var(--danger);
}


/* ==================================================
   TRANSCRIPT
================================================== */

.transcript,
.voice-transcript,
#voice-transcript {
  width: 100%;

  min-height: 54px;

  margin-top: 20px;

  padding:
    14px
    16px;

  border:
    1px solid
    var(--line);

  border-radius:
    var(--radius);

  color:
    var(--text);

  background:
    var(--panel-soft);

  text-align: left;
}

.transcript:empty,
.voice-transcript:empty,
#voice-transcript:empty {
  display: none;
}


/* ==================================================
   CONTEXT RESULT
================================================== */

.selected-context,
.active-context,
[data-selected-context] {
  display: inline-flex;

  align-items: center;

  min-height: 28px;

  margin-top: 10px;

  padding:
    4px
    10px;

  border-radius: 999px;

  color:
    var(--primary-dark);

  background:
    var(--primary-soft);

  font-size: 0.8rem;
  font-weight: 750;
}


/* ==================================================
   MANUAL INPUT
================================================== */

.manual-entry,
.reminder-entry,
.input-row {
  display: flex;

  align-items: stretch;

  gap: 10px;
}

input[type="text"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
textarea,
select {
  width: 100%;

  min-height: 48px;

  padding:
    11px
    13px;

  border:
    1px solid
    var(--line-strong);

  border-radius:
    var(--radius-small);

  color:
    var(--text);

  background:
    #ffffff;

  outline: none;

  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

textarea {
  min-height: 100px;

  resize: vertical;
}

input:focus,
textarea:focus,
select:focus {
  border-color:
    var(--primary);

  box-shadow:
    0
    0
    0
    3px
    rgba(36, 99, 235, 0.12);
}

input::placeholder,
textarea::placeholder {
  color:
    #929aa5;
}

label {
  display: block;

  margin-bottom: 6px;

  font-size: 0.88rem;
  font-weight: 700;
}

.field {
  margin-bottom: 16px;
}

.field:last-child {
  margin-bottom: 0;
}


/* ==================================================
   STANDARD BUTTONS
================================================== */

.button,
.btn,
button.action-button,
.save-button,
#save-reminder-button {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  gap: 8px;

  min-height: 46px;

  padding:
    10px
    17px;

  border:
    1px solid
    var(--line-strong);

  border-radius:
    var(--radius-small);

  color:
    var(--text);

  background:
    #ffffff;

  font-weight: 700;

  text-decoration: none;

  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    transform 0.15s ease;
}

.button:hover,
.btn:hover,
button.action-button:hover {
  background:
    #f6f7f8;

  border-color:
    #b9c0c9;
}

.primary-button,
.button.primary,
.btn.primary,
.save-button,
#save-reminder-button {
  color:
    #ffffff;

  background:
    var(--primary);

  border-color:
    var(--primary);
}

.primary-button:hover,
.button.primary:hover,
.btn.primary:hover,
.save-button:hover,
#save-reminder-button:hover {
  background:
    var(--primary-dark);

  border-color:
    var(--primary-dark);
}

.small-button,
.button.small,
.btn.small {
  min-height: 38px;

  padding:
    7px
    12px;

  font-size: 0.88rem;
}

.danger-button,
.button.danger {
  color:
    var(--danger);

  border-color:
    #e2b8b5;

  background:
    #ffffff;
}


/* ==================================================
   REMINDER FILTERS
================================================== */

.filter-row,
.reminder-filters {
  display: flex;

  flex-wrap: wrap;

  gap: 8px;

  margin-bottom: 18px;
}

.filter-button {
  min-height: 38px;

  padding:
    7px
    13px;

  border:
    1px solid
    var(--line);

  border-radius: 999px;

  color:
    var(--text-soft);

  background:
    #ffffff;

  font-size: 0.88rem;
  font-weight: 700;
}

.filter-button:hover {
  color:
    var(--text);

  border-color:
    var(--line-strong);
}

.filter-button.active,
.filter-button[aria-pressed="true"] {
  color:
    var(--primary-dark);

  border-color:
    #aac2ff;

  background:
    var(--primary-soft);
}


/* ==================================================
   REMINDER LIST
================================================== */

.reminder-list,
#reminder-list {
  display: grid;

  gap: 11px;
}

.reminder-item,
.reminder-card,
.reminder-row {
  display: grid;

  grid-template-columns:
    minmax(
      0,
      1fr
    )
    auto;

  gap: 16px;

  align-items: center;

  width: 100%;

  padding: 16px;

  border:
    1px solid
    var(--line);

  border-radius:
    var(--radius);

  background:
    #ffffff;
}

.reminder-item:hover,
.reminder-card:hover,
.reminder-row:hover {
  border-color:
    #c5cbd3;
}

.reminder-main,
.reminder-content {
  min-width: 0;
}

.reminder-title,
.reminder-text {
  margin: 0;

  font-size: 1rem;
  font-weight: 750;

  overflow-wrap: anywhere;
}

.reminder-meta {
  display: flex;

  flex-wrap: wrap;

  gap:
    5px
    12px;

  margin-top: 5px;

  color:
    var(--text-soft);

  font-size: 0.86rem;
}

.reminder-actions {
  display: flex;

  flex-wrap: wrap;

  justify-content: flex-end;

  gap: 7px;
}

.reminder-item.done,
.reminder-card.done,
.reminder-row.done {
  opacity: 0.68;

  background:
    #fafafa;
}

.reminder-item.done .reminder-title,
.reminder-card.done .reminder-title,
.reminder-row.done .reminder-title,
.reminder-item.done .reminder-text,
.reminder-card.done .reminder-text,
.reminder-row.done .reminder-text {
  text-decoration:
    line-through;
}


/* ==================================================
   REMINDER STATES
================================================== */

.reminder-item.overdue,
.reminder-card.overdue {
  border-left:
    5px solid
    var(--danger);
}

.reminder-item.today,
.reminder-card.today {
  border-left:
    5px solid
    var(--primary);
}

.reminder-item.upcoming,
.reminder-card.upcoming {
  border-left:
    5px solid
    var(--success);
}

.reminder-item.no-date,
.reminder-card.no-date {
  border-left:
    5px solid
    #89919c;
}


/* ==================================================
   STATUS PILLS
================================================== */

.status-pill,
.reminder-status {
  display: inline-flex;

  align-items: center;

  min-height: 26px;

  padding:
    4px
    9px;

  border-radius: 999px;

  color:
    var(--text-soft);

  background:
    #f0f2f4;

  font-size: 0.76rem;
  font-weight: 800;
}

.status-pill.overdue,
.reminder-status.overdue {
  color:
    var(--danger);

  background:
    var(--danger-soft);
}

.status-pill.today,
.reminder-status.today {
  color:
    var(--primary-dark);

  background:
    var(--primary-soft);
}

.status-pill.upcoming,
.reminder-status.upcoming {
  color:
    var(--success);

  background:
    var(--success-soft);
}


/* ==================================================
   REMINDER CONTEXT BADGES
================================================== */

.reminder-context-badge,
.context-badge {
  display: inline-flex;

  align-items: center;

  min-height: 24px;

  padding:
    3px
    8px;

  border:
    1px solid
    var(--line);

  border-radius: 999px;

  color:
    var(--text-soft);

  background:
    #f7f8fa;

  font-size: 0.74rem;
  font-weight: 750;
}


/* ==================================================
   GENERAL
================================================== */

.reminder-context-badge.general,
.context-badge.general {
  color:
    #555f6d;

  background:
    #f2f4f7;
}


/* ==================================================
   CUSTOMER
================================================== */

.reminder-context-badge.customer,
.context-badge.customer {
  color:
    #6a4b00;

  background:
    #fff7dd;
}


/* ==================================================
   FLOW
================================================== */

.reminder-context-badge.flow,
.context-badge.flow {
  color:
    #174aa6;

  background:
    #edf3ff;
}


/* ==================================================
   FOLLOW-UP
================================================== */

.reminder-context-badge.follow-up,
.context-badge.follow-up {
  color:
    #7a3e00;

  background:
    #fff0dd;
}


/* ==================================================
   NOTE
================================================== */

.reminder-context-badge.note,
.context-badge.note {
  color:
    #5c3c91;

  background:
    #f4efff;
}


/* ==================================================
   EMPTY / LOADING
================================================== */

.empty-state,
.loading-state,
.error-state {
  padding:
    30px
    20px;

  border:
    1px dashed
    var(--line-strong);

  border-radius:
    var(--radius);

  color:
    var(--text-soft);

  background:
    var(--panel-soft);

  text-align: center;
}

.empty-state strong,
.loading-state strong,
.error-state strong {
  display: block;

  margin-bottom: 4px;

  color:
    var(--text);
}

.error-state {
  color:
    var(--danger);

  background:
    var(--danger-soft);

  border-color:
    #edc2bf;
}


/* ==================================================
   FEEDBACK
================================================== */

.feedback,
.message,
.notice {
  margin-top: 16px;

  padding:
    12px
    14px;

  border-radius:
    var(--radius-small);

  color:
    var(--text-soft);

  background:
    var(--panel-soft);

  font-size: 0.9rem;
}

.feedback.success,
.message.success,
.notice.success {
  color:
    var(--success);

  background:
    var(--success-soft);
}

.feedback.error,
.message.error,
.notice.error {
  color:
    var(--danger);

  background:
    var(--danger-soft);
}


/* ==================================================
   UTILITY
================================================== */

.hidden {
  display: none !important;
}

.muted {
  color:
    var(--text-soft);
}

.text-center {
  text-align: center;
}

.full-width {
  width: 100%;
}

.sr-only {
  position: absolute;

  width: 1px;
  height: 1px;

  padding: 0;

  margin: -1px;

  overflow: hidden;

  clip:
    rect(
      0,
      0,
      0,
      0
    );

  white-space: nowrap;

  border: 0;
}


/* ==================================================
   FOCUS
================================================== */

button:focus-visible,
a:focus-visible {
  outline:
    3px solid
    rgba(36, 99, 235, 0.25);

  outline-offset: 3px;
}


/* ==================================================
   TABLET
================================================== */

@media (
  max-width: 760px
) {

  .app-shell,
  .page-shell,
  main {
    width:
      min(
        calc(
          100% - 24px
        ),
        var(--page-width)
      );
  }


  .panel,
  .reminder-panel,
  .voice-panel,
  .capture-panel {
    padding: 20px;
  }


  .reminder-item,
  .reminder-card,
  .reminder-row {
    grid-template-columns:
      1fr;
  }


  .reminder-actions {
    justify-content:
      flex-start;
  }

}


/* ==================================================
   MOBILE
================================================== */

@media (
  max-width: 520px
) {

  body {
    background:
      #ffffff;
  }


  .app-shell,
  .page-shell {
    width: 100%;

    padding:
      18px
      14px
      30px;
  }


  main {
    width: 100%;

    padding:
      0
      14px
      30px;
  }


  .panel,
  .reminder-panel,
  .voice-panel,
  .capture-panel {
    padding: 18px;

    border-radius: 16px;

    box-shadow: none;
  }


  header h1,
  .page-header h1,
  .app-header h1 {
    font-size:
      1.8rem;
  }


  .brand-row,
  .header-row {
    align-items:
      flex-start;
  }


  .context-pills,
  .context-options,
  .reminder-context-options,
  .voice-context-options {
    gap: 7px;
  }


  .context-pill,
  .context-button,
  [data-context],
  [data-reminder-context],
  [data-voice-context] {
    min-height: 38px;

    padding:
      7px
      12px;

    font-size:
      0.84rem;
  }


  .voice-button,
  .mic-button,
  .record-button,
  #voice-button,
  #record-button {
    min-width: 168px;

    height: 62px;

    padding:
      0
      22px;

    font-size:
      1.3rem;
  }


  .manual-entry,
  .reminder-entry,
  .input-row {
    flex-direction:
      column;
  }


  .manual-entry button,
  .reminder-entry button,
  .input-row button {
    width: 100%;
  }


  .reminder-item,
  .reminder-card,
  .reminder-row {
    padding: 14px;
  }


  .reminder-actions {
    display: grid;

    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );

    width: 100%;
  }


  .reminder-actions button {
    width: 100%;
  }


  .section-heading {
    align-items:
      flex-start;

    flex-direction:
      column;
  }

}


/* ==================================================
   VERY SMALL MOBILE
================================================== */

@media (
  max-width: 380px
) {

  .context-pills,
  .context-options,
  .reminder-context-options,
  .voice-context-options {
    display: grid;

    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }


  .context-pill,
  .context-button,
  [data-context],
  [data-reminder-context],
  [data-voice-context] {
    width: 100%;
  }


  .voice-button,
  .mic-button,
  .record-button,
  #voice-button,
  #record-button {
    width: 100%;

    max-width: 210px;
  }

}


/* ==================================================
   REDUCED MOTION
================================================== */

@media (
  prefers-reduced-motion: reduce
) {

  *,
  *::before,
  *::after {
    scroll-behavior:
      auto !important;

    transition:
      none !important;
  }

}