/* ==========================================================================
   TechTalk Members - design system bridge
   Keeps members, profiles, settings, messages and causette aligned.
   ========================================================================== */

:root {
  --ttm-color-primary: var(--tt-color-accent, #9b7434);
  --ttm-color-text: var(--tt-color-text, #f4f7f8);
  --ttm-color-bg: var(--tt-color-bg, #081c24);
  --ttm-color-surface: var(--tt-color-surface, #10212b);
  --ttm-color-border: var(--tt-color-border-soft, rgba(255, 255, 255, 0.09));
  --ttm-color-error: var(--tt-color-danger, #cd4a4a);
  --ttm-color-success: var(--tt-color-success, #4caf50);
  --ttm-color-muted: var(--tt-color-text-soft, #87959b);
  --ttm-color-bg-hover: var(--tt-color-surface-hover, rgba(255, 255, 255, 0.065));
  --ttm-color-bg-active: var(--tt-color-surface-active, rgba(166, 124, 53, 0.18));
  --ttm-scrollbar-thumb: rgba(var(--tt-color-accent-rgb, 155, 116, 52), 0.38);
  --ttm-radius: var(--tt-radius-md, 0.75rem);
  --ttm-radius-panel: var(--tt-radius-lg, 1rem);
  --ttm-radius-premium: var(--tt-radius-xl, 1.5rem);
  --ttm-font-size-base: var(--tt-font-size-md, 1rem);
}

.ttm-page:not(.ttm-page--messages) {
  padding: clamp(1.75rem, 4vw, 3rem) var(--tt-page-gutter, 1rem);
}

.ttm-container {
  width: min(100%, var(--tt-container-form, 42.5rem));
}

.ttm-container--narrow {
  width: min(100%, var(--tt-container-narrow, 30rem));
}

.ttm-page--profile .ttm-container {
  width: min(100%, 50rem);
}

.ttm-profile-header,
.ttm-settings-section,
.ttm-activity-item,
.ttm-modal__box,
.ttm-float-menu {
  background: color-mix(in srgb, var(--ttm-color-surface) 94%, transparent);
  border-color: var(--ttm-color-border);
  border-radius: var(--ttm-radius-panel);
  box-shadow: var(--tt-shadow-sm, 0 0.25rem 1rem rgba(0, 0, 0, 0.22));
}

.ttm-profile-header {
  align-items: center;
}

.ttm-settings-section__title,
.ttm-auth__title,
.ttm-profile-header__pseudo {
  color: var(--ttm-color-text);
}

.ttm-btn {
  min-height: 2.35rem;
  gap: 0.45rem;
  font-weight: 700;
  transition:
    color var(--tt-transition-fast, 0.15s ease),
    background var(--tt-transition-fast, 0.15s ease),
    border-color var(--tt-transition-fast, 0.15s ease),
    opacity var(--tt-transition-fast, 0.15s ease),
    transform var(--tt-transition-fast, 0.15s ease);
}

.ttm-btn--primary {
  background: var(--ttm-color-primary);
  color: #fff;
}

.ttm-btn--primary:hover {
  background: var(--tt-color-accent-strong, #7d5d29);
}

.ttm-btn--icon {
  min-height: 0;
  background: color-mix(in srgb, var(--ttm-color-surface) 82%, transparent);
  border-color: var(--ttm-color-border);
}

.ttm-btn--icon:focus-visible,
.ttm-btn:focus-visible,
.ttm-link:focus-visible,
.ttm-link-btn:focus-visible {
  outline: none;
  box-shadow: var(--tt-focus-ring, 0 0 0 3px rgba(24, 180, 255, 0.3));
}

.ttm-form__input,
.ttm-input,
.ttm-new-conv-input,
.ttm-inbox-search,
.ttm-compose__inner,
.ttm-cst__compose-inner {
  background: color-mix(in srgb, var(--ttm-color-bg) 92%, var(--ttm-color-surface));
  border-color: var(--ttm-color-border);
  transition: border-color var(--tt-transition-fast, 0.15s ease), box-shadow var(--tt-transition-fast, 0.15s ease);
}

.ttm-form__input:focus,
.ttm-input:focus,
.ttm-new-conv-input:focus,
.ttm-inbox-search:focus,
.ttm-compose__inner:focus-within,
.ttm-cst__compose-inner:focus-within {
  box-shadow: var(--tt-focus-ring, 0 0 0 3px rgba(24, 180, 255, 0.3));
}

/* Premium/glass surfaces inspired by ttm-conv-empty. */
.ttm-conv-empty,
.ttm-inbox-loading,
.ttm-inbox-empty,
.ttm-cst__empty {
  border: 1px solid var(--tt-color-border-soft, rgba(255, 255, 255, 0.09));
  border-radius: var(--ttm-radius-premium);
  background: rgba(255, 255, 255, 0.035);
  box-shadow: var(--tt-shadow-glass, inset 0 1px 0 rgba(255, 255, 255, 0.045), 0 1.5rem 5rem rgba(0, 0, 0, 0.18));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.ttm-cst__empty {
  margin: 0.75rem;
}

.ttm-messages-sidebar,
.ttm-conv-header,
.ttm-compose,
.ttm-cst__panel,
.ttm-cst__header,
.ttm-cst__compose {
  background: color-mix(in srgb, var(--ttm-color-surface) 92%, transparent);
  border-color: var(--ttm-color-border);
}

.ttm-messages-conv {
  background:
    radial-gradient(circle at 82% 10%, rgba(var(--tt-color-accent-rgb, 155, 116, 52), 0.14), transparent 30%),
    radial-gradient(circle at 18% 86%, rgba(var(--tt-color-blue-rgb, 24, 180, 255), 0.07), transparent 34%),
    var(--ttm-color-bg);
}

.ttm-messages-list,
.ttm-cst__messages {
  overflow-x: hidden;
}

.ttm-msg {
  max-width: min(72%, 42rem);
  min-width: 0;
}

.ttm-msg__main {
  min-width: 0;
  max-width: 100%;
}

.ttm-msg__bubble,
.ttm-cst .ttm-msg__bubble {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}

.ttm-cst__messages .ttm-msg {
  max-width: min(86%, 19rem);
}

.ttm-cst__messages .ttm-msg--theirs .ttm-msg__main {
  max-width: calc(100% - 2rem);
}

.ttm-msg--mine .ttm-msg__bubble {
  background: color-mix(in srgb, var(--ttm-color-primary) 86%, #fff);
  border-color: color-mix(in srgb, var(--ttm-color-primary) 72%, #fff);
}

.ttm-msg--theirs .ttm-msg__bubble {
  background: color-mix(in srgb, var(--tt-color-surface-3, #1b333f) 78%, #6a7785);
  border-color: color-mix(in srgb, var(--tt-color-border-muted, rgba(255,255,255,0.15)) 68%, #9ab0bc);
}

.ttm-inbox-item,
.ttm-cst__item {
  transition: background var(--tt-transition-fast, 0.15s ease), box-shadow var(--tt-transition-fast, 0.15s ease);
}

.ttm-inbox-item--active,
.ttm-cst__item--active {
  background: linear-gradient(90deg, rgba(var(--tt-color-accent-rgb, 155, 116, 52), 0.24), rgba(var(--tt-color-accent-rgb, 155, 116, 52), 0.08));
}

.ttm-inbox-item__preview,
.ttm-cst__item-preview,
.ttm-conv-partner-name,
.ttm-cst__partner-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ttm-inbox-item__main,
.ttm-cst__item-info {
  min-width: 0;
}

/* Causette: visual alignment only. Layout metrics stay in causette.css. */
.ttm-cst__toggle {
  background:
    radial-gradient(circle at 30% 24%, rgba(255, 255, 255, 0.22), transparent 34%),
    linear-gradient(145deg, var(--ttm-color-primary), var(--tt-color-accent-strong, #7d5d29));
  border: 1px solid rgba(var(--tt-color-accent-rgb, 155, 116, 52), 0.58);
  box-shadow:
    0 0.7rem 1.85rem rgba(var(--tt-color-accent-rgb, 155, 116, 52), 0.28),
    0 0.25rem 0.85rem rgba(0, 0, 0, 0.24);
}

.ttm-cst__panel {
  background:
    radial-gradient(circle at 85% 12%, rgba(var(--tt-color-accent-rgb, 155, 116, 52), 0.12), transparent 32%),
    radial-gradient(circle at 12% 88%, rgba(var(--tt-color-blue-rgb, 24, 180, 255), 0.055), transparent 36%),
    color-mix(in srgb, var(--ttm-color-bg) 94%, var(--ttm-color-surface));
  border-color: var(--tt-color-border-soft, rgba(255, 255, 255, 0.09));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 1.1rem 3.2rem rgba(0, 0, 0, 0.26);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.ttm-cst__header,
.ttm-cst__compose {
  background: color-mix(in srgb, var(--ttm-color-surface) 90%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.ttm-cst__list,
.ttm-cst__messages {
  overscroll-behavior: contain;
}

.ttm-cst__item {
  border-bottom-color: color-mix(in srgb, var(--ttm-color-border) 78%, transparent);
}

.ttm-cst__item-avatar,
.ttm-cst__partner-avatar {
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 0.45rem 1.2rem rgba(0, 0, 0, 0.18);
}

.ttm-cst__compose-inner {
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.12);
}

html.light-mode .ttm-profile-header,
html.light-mode .ttm-settings-section,
html.light-mode .ttm-activity-item,
html.light-mode .ttm-modal__box,
html.light-mode .ttm-float-menu {
  background: color-mix(in srgb, var(--ttm-color-surface) 90%, #fff);
  border-color: var(--tt-color-border-muted, rgba(91, 65, 34, 0.24));
}

html.light-mode .ttm-conv-empty,
html.light-mode .ttm-inbox-loading,
html.light-mode .ttm-inbox-empty,
html.light-mode .ttm-cst__empty {
  border-color: var(--tt-color-border-soft, rgba(91, 65, 34, 0.16));
  background: rgba(255, 255, 255, 0.48);
  box-shadow: var(--tt-shadow-glass);
}

html.light-mode .ttm-messages-sidebar,
html.light-mode .ttm-conv-header,
html.light-mode .ttm-compose,
html.light-mode .ttm-cst__panel,
html.light-mode .ttm-cst__header,
html.light-mode .ttm-cst__compose {
  background: color-mix(in srgb, var(--ttm-color-surface) 88%, transparent);
}

html.light-mode .ttm-msg--mine .ttm-msg__bubble {
  background: var(--ttm-color-primary);
  border-color: var(--tt-color-accent-strong, #7d5d29);
}

html.light-mode .ttm-msg--theirs .ttm-msg__bubble {
  background: color-mix(in srgb, var(--ttm-color-surface) 76%, var(--tt-color-surface-2));
  border-color: var(--tt-color-border-muted, rgba(91, 65, 34, 0.24));
}

html.light-mode .ttm-cst__panel {
  background:
    radial-gradient(circle at 86% 12%, rgba(var(--tt-color-accent-rgb, 155, 116, 52), 0.10), transparent 32%),
    radial-gradient(circle at 12% 88%, rgba(var(--tt-color-blue-rgb, 24, 180, 255), 0.04), transparent 36%),
    color-mix(in srgb, var(--ttm-color-surface) 92%, #fff);
  border-color: var(--tt-color-border-soft, rgba(91, 65, 34, 0.16));
}

html.light-mode .ttm-cst__item {
  border-bottom-color: rgba(91, 65, 34, 0.12);
}

@media (max-width: 640px) {
  .ttm-page:not(.ttm-page--messages) {
    padding: clamp(1.25rem, 8vw, 2rem) 0.875rem;
  }

  .ttm-profile-header,
  .ttm-settings-section,
  .ttm-activity-item {
    border-radius: var(--ttm-radius-panel);
  }

  .ttm-msg {
    max-width: 86%;
  }

  .ttm-messages-list {
    padding-inline: 0.75rem;
  }

  .ttm-compose__send {
    min-height: 0;
  }

}