@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  .animate-fade-in  { @apply transition-opacity duration-200 opacity-0; }
  .animate-fade-in.show { @apply opacity-100; }
  .animate-fade-out { @apply transition-opacity duration-200; }

  /* более мягкий «breathing» эффект */
  .animate-breathe {
    animation: breathe 1.8s ease-in-out infinite;
  }
  @keyframes breathe {
    0%, 100% { opacity: .35; }
    50%      { opacity: 1; }
  }
}

@layer base {
  html { @apply antialiased; }
  body { @apply bg-slate-50 text-slate-800; }
}

/* ===== Компоненты для форм ===== */
@layer components {
  .auth-wrapper { @apply min-h-[calc(100vh-56px)] flex items-center justify-center px-4; } /* центрируем */
  .auth-card    { @apply w-full max-w-md bg-white/90 backdrop-blur border border-slate-200 rounded-2xl shadow-sm p-6 sm:p-8; } /* фон + бордер + скругления */

  .title-xl     { @apply text-2xl font-semibold; }
  .hint         { @apply text-xs text-slate-500; }

  .label        { @apply block text-sm font-medium text-slate-700 mb-1; } /* лейбл СВЕРХУ поля */
  .input        { @apply block w-full rounded-xl border border-slate-300 bg-white px-3 py-2 text-sm placeholder:text-slate-400 shadow-sm focus:outline-none focus:border-slate-400 focus:ring-2 focus:ring-slate-900/10; } /* тонкий серый бордер */
  .input-error  { @apply border-rose-300 focus:border-rose-400 focus:ring-rose-100; }
  .error-text   { @apply mt-1 text-xs text-rose-600; }

  .btn          { @apply inline-flex items-center justify-center rounded-xl px-4 py-2 text-sm font-medium transition; }
  .btn-primary  { @apply bg-slate-900 text-white hover:bg-slate-800; }
  .btn-ghost    { @apply text-slate-600 hover:text-slate-900; }
  .btn-block    { @apply w-full; }
}

/* (опционально) убираем жёлтый autofill у Chrome */
@layer base {
  input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px white inset;
    box-shadow: 0 0 0px 1000px white inset;
    -webkit-text-fill-color: #0f172a; /* slate-900 */
  }
}
.tinymce_70_vh {
    height: 70vh;
}

.tinymce_90_vh {
    height: 90vh;
}
/* Общий текст формы логина */
.trestle .login .card,
.trestle .login .card * {
  color: #111 !important;
}

/* Поля ввода */
.trestle .login .card .form-control {
  background: #fff !important;
  color: #111 !important;
  border-color: #d1d5db !important; /* gray-300 */
}

/* Плейсхолдер */
.trestle .login .card .form-control::placeholder {
  color: #6b7280 !important; /* gray-500 */
}

/* Кнопка */
.trestle .login .card .btn-primary {
  background: #111 !important;
  border-color: #111 !important;
}
.trestle .login .card .btn-primary:hover {
  background: #222 !important;
  border-color: #222 !important;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */


 /* ---- NAV ---- */
.nav-glass{
  position: sticky; top: 0; z-index: 1000;
  background: color-mix(in oklab, var(--card) 78%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.nav-inner{
  max-width: 1120px; margin: 0 auto;
  height: 56px; padding: 0 16px;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px;
}
.brand{
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 700; color: var(--text); text-decoration: none;
}
.brand-dot{
  width: 10px; height: 10px; border-radius: 50%;
  background: conic-gradient(var(--accent), var(--accent-2));
  box-shadow: 0 0 18px color-mix(in oklab, var(--accent) 65%, transparent);
}

.nav-left{ display:flex; align-items:center; gap:12px }
.nav-burger{
  display:none; width:40px; height:36px; border:1px solid var(--border);
  border-radius: 10px; background: #0b1220; color: var(--text);
}
.nav-burger span{ display:block; height:2px; background: var(--text); margin:5px 10px }

.nav-links{
  display:flex; align-items:center; gap: 12px;
}
.nav-link{
  display:inline-flex; align-items:center; gap:6px;
  padding: 8px 12px; border-radius: 10px;
  color: var(--text); text-decoration: none; border: 1px solid transparent;
}
.nav-link:hover{ background: rgba(255,255,255,.03); border-color: var(--border) }
.nav-link.active{
  background: linear-gradient(90deg, color-mix(in oklab, var(--accent) 25%, transparent),
                                      color-mix(in oklab, var(--accent-2) 22%, transparent));
  border-color: color-mix(in oklab, var(--accent) 35%, transparent);
}

.nav-right{ display:flex; align-items:center; gap: 10px }
.nav-user{ display:flex; align-items:center; gap:8px; color: var(--muted); font-size: 13px }
.avatar{
  width: 26px; height: 26px; display:grid; place-items:center;
  border-radius: 8px; background:#0b1220; border:1px solid var(--border);
  font-weight: 700; color: var(--text);
}
.badge{
  font-size: 12px; padding: 4px 8px; border-radius: 999px;
  border:1px solid var(--border); color: var(--muted); background: #0b1220;
}
.badge.infinity{
  background: linear-gradient(90deg, rgba(96,165,250,.18), rgba(34,211,238,.16));
  border-color: rgba(96,165,250,.35); color: var(--text);
}
.btn-primary{
  padding: 10px 14px; border-radius: 12px; font-weight: 700;
  border:1px solid color-mix(in oklab, var(--accent) 35%, transparent);
  background: linear-gradient(90deg, rgba(96,165,250,.25), rgba(34,211,238,.22));
  color: var(--text); text-decoration: none;
}
.btn-primary:hover{ transform: translateY(-1px) }
.btn-exit{
  padding: 8px 12px; 
  border-radius: 10px; 
  font-weight: 600;
  border:1px solid var(--border); 
  background: rgba(255,255,255,.03); 
  color: var(--text);
}
.btn-exit:hover{ background:#ef4444; }

/* Админ-дропдаун на details/summary */
.dropdown{ position: relative }
.dropdown > summary{
  list-style: none; cursor: pointer;
  padding: 8px 12px; border-radius: 10px;
  border: 1px solid transparent; color: var(--text);
}
.dropdown > summary:hover{ background: rgba(255,255,255,.03); border-color: var(--border) }
.dropdown[open] > summary{ background: rgba(255,255,255,.04); border-color: var(--border) }
.dropdown-menu{
  position: absolute; right: 0; top: calc(100% + 8px);
  min-width: 220px; padding: 8px;
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
  border:1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); backdrop-filter: blur(6px);
}
.dropdown-item{
  display:block; padding: 8px 10px; border-radius: 8px; text-decoration: none; color: var(--text);
}
.dropdown-item:hover{ background: rgba(255,255,255,.04) }

/* Мобилка */
@media (max-width: 900px){
  .nav-inner{ grid-template-columns: 1fr auto; height: 56px }
  .nav-burger{ display:block }
  .nav-links{
    position: fixed; left: 12px; right: 12px; top: 64px;
    display: none; flex-direction: column; gap: 8px; padding: 12px;
    background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
    border:1px solid var(--border); border-radius: var(--radius);
    box-shadow: var(--shadow); backdrop-filter: blur(6px);
  }
  .nav-links.open{ display:flex }
  .nav-right .email{ display:none }
}


.section-wrap{ max-width:1200px; margin:24px auto; padding:0 20px; display:grid; gap:22px }
.hero .header h1{ font-size:22px; color: white; }
.feature-grid{
  display:grid; grid-template-columns: repeat(3,1fr); gap:22px;
}
@media (max-width:980px){ .feature-grid{ grid-template-columns:1fr } }

.icon-wrap{
  width:56px; height:56px; display:grid; place-items:center;
  border-radius:14px; background:linear-gradient(180deg, rgba(96,165,250,.18), rgba(34,211,238,.14));
  border:1px solid rgba(96,165,250,.35);
  margin-bottom:6px;
}
.icon-wrap svg{ width:28px; height:28px; color: var(--text); opacity:.9 }

.feature-title{ margin:0; font-weight:700 }

.contact-grid{
  display:grid; grid-template-columns: 1.2fr .8fr; gap:22px;
}
@media (max-width:980px){ .contact-grid{ grid-template-columns:1fr } }

/* форма: используем твои базовые поля, расширим типы */
input[type="text"], input[type="email"], input[type="tel"], textarea{
  width:100%; padding:12px 14px; background:#0b1220; color:var(--text);
  border:1px solid var(--border); border-radius:12px; outline:none; transition:.2s border,.2s box-shadow;
}
input[type="email"]:focus, input[type="tel"]:focus{ border-color:var(--accent); box-shadow:0 0 0 6px var(--ring) }

.contact-list{ list-style:none; padding:0; margin:0; display:grid; gap:10px }
.contact-list li{ display:flex; align-items:flex-start; gap:10px }
.contact-list svg{ width:20px; height:20px; color: var(--muted) }
.contact-list a{ color: var(--text); text-decoration: underline }


.auth-wrap{
  min-height: calc(100vh - 72px);
  display: grid; place-items: center;
  padding: 24px 16px;
}
.auth-card{
  width: 100%;
  max-width: 480px;
}
.auth-card .panel{ padding-top: 18px }

input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
textarea,
.drop {
  width: 100%;
  padding: 12px 14px;
  background: #0b1220;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 12px;
  outline: none;
  transition: .2s border, .2s box-shadow;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus,
textarea:focus,
.drop:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 6px var(--ring);
}

.hairline > :not([hidden]) ~ :not([hidden]) { border-top-width: .5px; }

.record-ui {
  display: flex; flex-direction: column; gap: .6rem;
  background: #10131a; border: 1px solid #2a2f3a; border-radius: 12px;
  padding: .6rem .8rem; color: #bcd;
}
.record-ui.hidden { display: none; }
.record-ui.recording .wave { width: 100%; height: 80px; background: #0b0e14; border-radius: 8px; }
.record-ui .hint, .record-ui .meta { font-size: .85rem; color: #9fb3c8; }
.record-ui .actions { display: flex; gap: .5rem; justify-content: flex-end; }

.btn.primary  { background: #3b82f6; color:#fff; padding:.45rem .7rem; border-radius:8px; }
.btn.secondary{ background: #374151; color:#fff; padding:.45rem .7rem; border-radius:8px; }
.btn.danger   { background: #ef4444; color:#fff; padding:.45rem .7rem; border-radius:8px; }
.btn.mic.recording { animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(255,64,64,.35)} 70%{box-shadow:0 0 0 12px rgba(255,64,64,0)} 100%{box-shadow:0 0 0 0 rgba(255,64,64,0)} }