/* teacher/ai — Sütlaç öğretmen sayfası + panel çekmeceleri */
#teacher-ai-view.hidden,
#teacher-panel .view-block.hidden,
.tai-view.hidden {
    display: none !important;
}
.tai-view:not(.hidden) { display: flex; flex-direction: column; gap: 0.9rem; }
.tai-usage {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 1.35rem;
    padding: 1rem 1.1rem;
}
.tai-usage-kpis {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.65rem;
    margin-bottom: 0.9rem;
}
.tai-usage-kpi {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    padding: 0.7rem 0.8rem;
}
.tai-usage-kpi strong { display: block; font-size: 1.15rem; color: #0f172a; }
.tai-usage-kpi em { font-style: normal; font-size: 0.68rem; color: #64748b; }
.tai-usage-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.85rem;
}
.tai-usage-grid h3 {
    margin: 0 0 0.45rem;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #334155;
}
.tai-usage-grid p { margin: 0.2rem 0; font-size: 0.78rem; color: #0f172a; }
.tai-usage-grid p span { color: #64748b; margin-right: 0.35rem; }
.tai-usage-grid p em { font-style: normal; color: #0f766e; font-weight: 800; float: right; }
.tai-topic-row {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0.35rem 0;
    font-size: 0.75rem;
}
.tai-topic-row span { min-width: 7.2rem; color: #334155; }
.tai-topic-row b {
    display: block;
    height: 0.45rem;
    border-radius: 999px;
    background: #0d9488;
}
.tai-topic-row em { font-style: normal; color: #64748b; }
@media (max-width: 1100px) {
    .tai-usage-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
    .tai-usage-kpis, .tai-usage-grid, .tai-charts, .tai-track { grid-template-columns: 1fr; }
}
.tai-hero {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 1.25rem;
    border-radius: 1.5rem;
    background: linear-gradient(135deg, #f5f3ff, #fff 48%, #ecfeff);
    border: 1px solid #ddd6fe;
    box-shadow: 0 10px 30px rgba(124, 58, 237, 0.1);
}
.tai-hero-visual img { width: 72px; height: 72px; object-fit: contain; }
.tai-kicker { margin: 0; font-size: 0.65rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #7c3aed; }
.tai-hero-copy h2 { margin: 0.15rem 0 0; font-size: 1.4rem; font-weight: 900; color: #0f172a; }
.tai-hero-copy h2 span { color: #7c3aed; }
.tai-hero-copy p { margin: 0.35rem 0 0; font-size: 0.78rem; color: #64748b; max-width: 42rem; }
.tai-info-btn {
    margin-left: auto;
    font-size: 0.72rem;
    font-weight: 800;
    padding: 0.45rem 0.75rem;
    border-radius: 0.85rem;
    border: 1px solid #ddd6fe;
    background: #fff;
    color: #6d28d9;
}
.tai-tabs { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.tai-tab {
    font-size: 0.75rem;
    font-weight: 800;
    padding: 0.45rem 0.85rem;
    border-radius: 999px;
    border: 2px solid #e2e8f0;
    background: #fff;
    color: #475569;
}
.tai-tab.is-active { border-color: #7c3aed; background: #f5f3ff; color: #5b21b6; }
.tai-tab-badge {
    margin-left: 0.3rem;
    background: #f43f5e;
    color: #fff;
    border-radius: 999px;
    padding: 0 0.4rem;
    font-size: 0.62rem;
}
.tai-tab-badge.hidden { display: none; }
.tai-pane {
    background: #fff;
    border: 1px solid #e8ecf4;
    border-radius: 1.35rem;
    padding: 1rem;
    min-height: 18rem;
}
.tai-chat-layout { display: flex; flex-direction: column; gap: 0.7rem; min-height: 22rem; }
.tai-chat-log {
    flex: 1;
    min-height: 16rem;
    max-height: 28rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: 0.25rem;
}
.tai-bubble {
    max-width: 85%;
    padding: 0.65rem 0.85rem;
    border-radius: 1rem;
    font-size: 0.8rem;
    line-height: 1.45;
    white-space: pre-wrap;
}
.tai-bubble.is-user { align-self: flex-end; background: #7c3aed; color: #fff; }
.tai-bubble.is-ai { align-self: flex-start; background: #f8fafc; border: 1px solid #e2e8f0; color: #1e293b; }
.tai-bubble.is-typing {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    min-width: 3.2rem;
}
.tai-bubble.is-typing span {
    width: 0.42rem;
    height: 0.42rem;
    border-radius: 50%;
    background: #a78bfa;
    animation: taiDot 1.2s ease infinite;
}
.tai-bubble.is-typing span:nth-child(2) { animation-delay: 0.15s; }
.tai-bubble.is-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes taiDot {
    0%, 80%, 100% { opacity: 0.35; transform: scale(0.85); }
    40% { opacity: 1; transform: scale(1); }
}
.tai-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.tai-chips button {
    font-size: 0.68rem;
    font-weight: 800;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    border: 1px solid #ddd6fe;
    background: #faf5ff;
    color: #6d28d9;
}
.tai-compose { display: flex; gap: 0.45rem; }
.tai-loc-btn {
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 0.9rem;
    background: #fff;
    color: #64748b;
    border: 1px solid #e2e8f0;
    flex-shrink: 0;
}
.tai-loc-btn.is-on {
    color: #059669;
    border-color: #a7f3d0;
    background: #ecfdf5;
}
.tai-compose input {
    flex: 1;
    border: 1px solid #e2e8f0;
    border-radius: 0.95rem;
    padding: 0.65rem 0.85rem;
    font-size: 0.8rem;
}
.tai-send {
    width: 2.6rem; height: 2.6rem; border-radius: 0.9rem;
    background: #7c3aed; color: #fff; border: 0;
}
.tai-monitor-list, .tai-content-list { display: flex; flex-direction: column; gap: 0.55rem; }
.tai-alert, .tai-content-row {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 0.75rem 0.85rem;
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    background: #fff;
    text-align: left;
    width: 100%;
}
.tai-alert.is-critical { border-color: #fda4af; background: #fff1f2; }
.tai-alert.is-watch { border-color: #bae6fd; background: #f0f9ff; }
.tai-alert em { font-style: normal; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; color: #64748b; }
.tai-alert.is-critical em { color: #be123c; }
.tai-alert-ico { width: 2rem; text-align: center; color: #7c3aed; }
.tai-content-box {
    padding: 0.75rem 0.9rem;
    border-radius: 1rem;
    background: #f5f3ff;
    border: 1px solid #ddd6fe;
    font-size: 0.78rem;
    color: #4c1d95;
    margin-bottom: 0.75rem;
}
.tai-intro-overlay {
    position: fixed; inset: 0; z-index: 220;
    background: rgba(15, 23, 42, 0.55);
    display: flex; align-items: center; justify-content: center;
    padding: 1rem;
}
.tai-intro-overlay.hidden { display: none; }
.tai-intro-card {
    max-width: 26rem;
    background: #fff;
    border-radius: 1.35rem;
    padding: 1.4rem;
    text-align: center;
}
.tai-intro-card h3 { margin: 0.5rem 0 0.35rem; font-weight: 900; }
.tai-intro-card p { font-size: 0.8rem; color: #475569; }
.tai-intro-card a { color: #6d28d9; font-weight: 800; }
.tai-intro-ok {
    margin-top: 0.9rem;
    background: #7c3aed; color: #fff; border: 0;
    border-radius: 0.85rem; padding: 0.5rem 1.1rem; font-weight: 800;
}
.tai-connect-link {
    display: block;
    margin-top: 0.45rem;
    background: #f5f3ff;
    color: #6d28d9 !important;
    font-weight: 800;
    font-size: 0.78rem;
    border-radius: 0.85rem;
    padding: 0.55rem 0.75rem;
    text-decoration: none;
}
.tai-connect-input {
    width: 100%;
    margin-top: 0.75rem;
    border: 1px solid #ddd6fe;
    border-radius: 0.85rem;
    padding: 0.6rem 0.75rem;
    font-size: 0.8rem;
}
.tai-connect-status {
    margin: 0.45rem 0 0 !important;
    font-size: 0.72rem !important;
    color: #6d28d9 !important;
    text-align: left;
}
.tai-connect-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: center; }
.tai-connect-skip {
    margin-top: 0.9rem;
    background: #fff; color: #64748b; border: 1px solid #e2e8f0;
    border-radius: 0.85rem; padding: 0.5rem 1.1rem; font-weight: 800;
}

.tai-dock {
    border: 1px solid #ddd6fe;
    border-radius: 1.1rem;
    background: linear-gradient(180deg, #faf5ff, #fff);
    overflow: hidden;
}
.tai-dock-summary {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.65rem 0.9rem;
    cursor: pointer;
    list-style: none;
    font-size: 0.8rem;
    font-weight: 800;
    color: #5b21b6;
}
.tai-dock-summary::-webkit-details-marker { display: none; }
.tai-dock-summary img { width: 22px; height: 22px; }
.tai-dock-body { padding: 0 0.9rem 0.85rem; }
.tai-dock-body p { margin: 0 0 0.5rem; font-size: 0.7rem; color: #64748b; }
.tai-dock--live { border: 1px solid #ddd6fe; border-radius: 1.1rem; background: linear-gradient(180deg, #faf5ff, #fff); overflow: hidden; }
.tai-dock--live .tai-dock-summary { cursor: default; }
.tai-dock-brief {
    margin: 0 0 0.55rem;
    font-size: 0.78rem !important;
    line-height: 1.45;
    color: #334155 !important;
    white-space: pre-wrap;
    background: #fff;
    border: 1px solid #ede9fe;
    border-radius: 0.75rem;
    padding: 0.55rem 0.7rem;
}
.tai-dock-reply {
    margin: 0.5rem 0 0;
    font-size: 0.75rem;
    line-height: 1.45;
    color: #4c1d95;
    white-space: pre-wrap;
    background: #f5f3ff;
    border-radius: 0.7rem;
    padding: 0.5rem 0.65rem;
}
.tai-dock-ask { display: flex; gap: 0.35rem; margin-top: 0.45rem; }
.tai-dock-input {
    flex: 1;
    border: 1px solid #ddd6fe;
    border-radius: 0.7rem;
    padding: 0.4rem 0.6rem;
    font-size: 0.72rem;
}
.tai-dock-ask button {
    font-size: 0.68rem;
    font-weight: 800;
    border: 0;
    border-radius: 0.7rem;
    padding: 0.4rem 0.7rem;
    background: #7c3aed;
    color: #fff;
}
.tai-bubble { white-space: pre-wrap; }
.tai-dock-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.tai-dock-chips button {
    font-size: 0.65rem; font-weight: 800;
    padding: 0.3rem 0.6rem; border-radius: 999px;
    border: 1px solid #ddd6fe; background: #fff; color: #6d28d9;
}
.tai-pane--chat { min-height: min(70vh, 42rem); }
.tai-flag {
    display: grid;
    grid-template-columns: 0.7rem 1fr auto;
    gap: 0.65rem;
    align-items: start;
    padding: 0.7rem 0.75rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.9rem;
    margin-bottom: 0.5rem;
    background: #fff;
}
.tai-flag-dot { width: 0.7rem; height: 0.7rem; border-radius: 999px; margin-top: 0.25rem; }
.tai-flag.is-yellow { border-color: #fde68a; background: #fffbeb; }
.tai-flag.is-yellow .tai-flag-dot { background: #eab308; }
.tai-flag.is-orange { border-color: #fdba74; background: #fff7ed; }
.tai-flag.is-orange .tai-flag-dot { background: #ea580c; }
.tai-flag.is-red { border-color: #fca5a5; background: #fef2f2; }
.tai-flag.is-red .tai-flag-dot { background: #dc2626; }
.tai-flag-meta { margin: 0; font-size: 0.74rem; color: #0f172a; }
.tai-flag-text { margin: 0.25rem 0 0; font-size: 0.72rem; color: #475569; }
.tai-flag-go, .tai-write-card button {
    font-size: 0.68rem;
    font-weight: 800;
    border: 0;
    border-radius: 0.7rem;
    padding: 0.4rem 0.65rem;
    background: #0f766e;
    color: #fff;
    white-space: nowrap;
}
.tai-write-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 0.8rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.9rem;
    margin-bottom: 0.45rem;
    background: #fff;
}
.tai-write-card span { display: block; font-size: 0.7rem; color: #64748b; }

@media (max-width: 700px) {
    .tai-hero { flex-direction: column; text-align: center; }
    .tai-info-btn { margin-left: 0; }
}

.tai-ask-drawer {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 1.15rem;
    overflow: hidden;
}
.tai-ask-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.7rem 0.9rem;
    border: 0;
    background: #fff;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
}
.tai-ask-toggle span { font-size: 0.85rem; font-weight: 800; color: #5b21b6; }
.tai-ask-toggle em { flex: 1; font-style: normal; font-size: 0.7rem; color: #64748b; font-weight: 600; }
.tai-ask-toggle i { color: #94a3b8; transition: transform 0.15s ease; }
.tai-ask-drawer.is-open .tai-ask-toggle i { transform: rotate(180deg); }
.tai-ask-drawer.is-risk .tai-ask-toggle span { color: #be123c; }
#tai-pane-chat.hidden,
#tai-feed-pane.hidden,
#tai-monitor-pane.hidden { display: none !important; }
#tai-pane-chat,
#tai-feed-pane,
#tai-monitor-pane { border: 0; border-radius: 0; border-top: 1px solid #f1f5f9; }

.tai-grade {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.tai-grade button {
    font-size: 0.72rem;
    font-weight: 800;
    padding: 0.4rem 0.75rem;
    border-radius: 999px;
    border: 2px solid #e2e8f0;
    background: #fff;
    color: #475569;
    cursor: pointer;
    font-family: inherit;
}
.tai-grade button.is-on {
    border-color: #7c3aed;
    background: #f5f3ff;
    color: #5b21b6;
}
.tai-usage-kpi.is-warn { background: #fffbeb; border-color: #fde68a; }
.tai-usage-kpi.is-danger { background: #fff1f2; border-color: #fecdd3; }
.tai-usage-kpi.is-mood { background: #f0f9ff; border-color: #bae6fd; }
.tai-charts {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 0.85rem;
    margin-bottom: 0.95rem;
}
.tai-charts h3,
.tai-track h3,
.tai-card h3 {
    margin: 0 0 0.45rem;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #334155;
}
.tai-chart-box {
    position: relative;
    height: 11.5rem;
}
.tai-chart-box--donut { height: 9.4rem; }
.tai-chart-box canvas { width: 100% !important; height: 100% !important; }
.tai-topic-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.75rem;
    justify-content: center;
    margin-top: 0.65rem;
}
.tai-topic-legend span {
    display: inline-flex;
    align-items: center;
    gap: 0.32rem;
    font-size: 0.68rem;
    font-weight: 800;
    color: #334155;
}
.tai-topic-legend i {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 999px;
    flex-shrink: 0;
}
.tai-topic-legend em {
    font-style: normal;
    font-weight: 700;
    color: #94a3b8;
}
.tai-empty {
    margin: 0;
    padding: 2.2rem 0.5rem 0;
    text-align: center;
    font-size: 0.75rem;
    color: #94a3b8;
}
.tai-empty.hidden { display: none; }
.tai-track {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.85rem;
}
.tai-track article,
.tai-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 1.25rem;
    padding: 1rem 1.05rem;
}
.tai-card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.35rem;
}
.tai-card-head p,
.tai-card-hint {
    margin: 0 0 0.55rem;
    font-size: 0.7rem;
    color: #64748b;
}
.tai-person {
    display: flex;
    width: 100%;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.65rem 0.7rem;
    margin: 0 0 0.4rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.9rem;
    background: #fff;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
}
.tai-person:hover { border-color: #c4b5fd; background: #faf5ff; }
.tai-person.is-critical { border-color: #fda4af; background: #fff1f2; }
.tai-person.is-watch { border-color: #fde68a; background: #fffbeb; }
.tai-person strong { display: block; font-size: 0.78rem; color: #0f172a; }
.tai-person span { display: block; font-size: 0.7rem; color: #64748b; margin-top: 0.15rem; }
.tai-person em {
    margin-left: auto;
    font-style: normal;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #7c3aed;
    white-space: nowrap;
}
.tai-table-wrap { overflow-x: auto; }
.tai-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.75rem;
}
.tai-table th {
    text-align: left;
    font-size: 0.65rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #64748b;
    padding: 0.4rem 0.5rem;
    border-bottom: 1px solid #e2e8f0;
}
.tai-table td { padding: 0.5rem; border-bottom: 1px solid #f1f5f9; color: #0f172a; }
.tai-table button {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    font-weight: 800;
    color: #5b21b6;
    cursor: pointer;
    text-align: left;
}
.tai-chip {
    display: inline-block;
    font-size: 0.62rem;
    font-weight: 800;
    padding: 0.18rem 0.45rem;
    border-radius: 999px;
    background: #f1f5f9;
    color: #334155;
}
.tai-chip.is-ok { background: #ecfdf5; color: #047857; }
.tai-chip.is-off { background: #f1f5f9; color: #64748b; }
.tai-chip.is-quiet { background: #fffbeb; color: #b45309; }
.tai-chip.is-alert { background: #fff1f2; color: #be123c; }
.tai-chip.is-mood { background: #f0f9ff; color: #0369a1; }
.tai-feed-row {
    display: flex;
    gap: 0.7rem;
    padding: 0.65rem 0.15rem;
    border-bottom: 1px solid #f1f5f9;
}
.tai-feed-row:last-child { border-bottom: 0; }
.tai-feed-row button {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    font-weight: 800;
    color: #5b21b6;
    cursor: pointer;
    min-width: 7rem;
    text-align: left;
}
.tai-feed-row p { margin: 0; font-size: 0.75rem; color: #334155; }
.tai-feed-row span { display: block; font-size: 0.65rem; color: #94a3b8; margin-top: 0.15rem; }

.tai-mood-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.55rem;
    margin-bottom: 0.75rem;
}
.tai-mood-kpis .tai-usage-kpi { margin: 0; }
.tai-mood-dist {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.4rem;
    margin-bottom: 0.85rem;
}
.tai-mood-cell {
    text-align: center;
    padding: 0.55rem 0.3rem;
    border-radius: 0.9rem;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
}
.tai-mood-cell.is-low { background: #fff1f2; border-color: #fecdd3; }
.tai-mood-cell b { display: block; font-size: 1.25rem; line-height: 1.2; }
.tai-mood-cell strong { display: block; font-size: 0.95rem; color: #0f172a; }
.tai-mood-cell em { font-style: normal; font-size: 0.62rem; color: #64748b; }
.tai-mood-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.85rem;
}
.tai-mood-grid h3 {
    margin: 0 0 0.4rem;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #334155;
}
@media (max-width: 720px) {
    .tai-mood-kpis, .tai-mood-dist, .tai-mood-grid { grid-template-columns: 1fr 1fr; }
}