/* >> - frontend/css/style.css */
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    background:#111;
    color:#fff;
    font-family:
        Segoe UI,
        Arial,
        sans-serif;
    min-height:100vh;
}

.app{
    max-width:900px;
    margin:auto;
    padding:12px;
}

.header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:12px;
}

.logo{
    font-size:1.3rem;
    font-weight:700;
}

.lang-switch{
    display:flex;
    gap:8px;
}

.lang-btn{
    border:none;
    padding:10px 16px;
    border-radius:10px;
    cursor:pointer;
    background:#2c2c2c;
    color:white;
}

.lang-btn.active{
    background:#1976d2;
}

/* Camera section */
.camera-section{
    position:relative;
    width:100%;
    aspect-ratio:16/9;
    overflow:hidden;
    border-radius:16px;
    background:black;
    margin-bottom:12px;
}

#camera{
    width:100%;
    height:100%;
    object-fit:cover;
}

.camera-overlay{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    padding:12px;
    background:linear-gradient(transparent,rgba(0,0,0,.8));
}

/* Compass widget */
.compass-wrap{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:4px;
}

.compass{
    width:64px;
    height:64px;
    position:relative;
}

.compass-ring{
    width:100%;
    height:100%;
    border-radius:50%;
    border:2px solid rgba(255,255,255,0.25);
    position:relative;
}

/* Cardinal tick marks */
.compass-ring::before{
    content:'';
    position:absolute;
    left:50%;
    top:4px;
    transform:translateX(-50%);
    width:2px;
    height:8px;
    background:rgba(255,255,255,0.5);
    border-radius:1px;
}

.compass-needle{
    position:absolute;
    top:50%;
    left:50%;
    width:4px;
    height:52px;
    margin-left:-2px;
    margin-top:-26px;
    transform-origin:center center;
    transform:rotate(0deg);
    transition:transform 0.3s ease;
}

/* North half — red */
.compass-needle::before{
    content:'';
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:50%;
    background:#e53935;
    border-radius:2px 2px 0 0;
}

/* South half — white */
.compass-needle::after{
    content:'';
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:50%;
    background:#fff;
    border-radius:0 0 2px 2px;
}

.compass-center{
    position:absolute;
    top:50%;
    left:50%;
    width:8px;
    height:8px;
    background:#fff;
    border-radius:50%;
    transform:translate(-50%,-50%);
    z-index:2;
}

.compass-label{
    font-size:0.7rem;
    opacity:0.7;
    letter-spacing:0.05em;
}

/* Status text */
#gpsStatus,
#headingStatus{
    font-size:0.8rem;
    opacity:0.85;
}

/* Controls */
.controls{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:10px;
    margin-bottom:12px;
}

button{
    min-height:52px;
    border:none;
    border-radius:12px;
    cursor:pointer;
    font-size:1rem;
}

.primary-btn{
    background:#1976d2;
    color:white;
}

.secondary-btn{
    background:#555;
    color:white;
}

.accent-btn{
    background:#00c853;
    color:white;
}

.question-panel{
    display:flex;
    flex-direction:column;
    gap:10px;
    margin-bottom:12px;
}

#questionInput{
    width:100%;
    min-height:120px;
    resize:none;
    border:none;
    border-radius:12px;
    padding:12px;
    font-size:1rem;
    background:#222;
    color:white;
}

.ask-btn{
    background:#ff9800;
    color:white;
}

.answer-panel,
.objects-panel{
    background:#1c1c1c;
    border-radius:12px;
    padding:14px;
    margin-bottom:12px;
}

.panel-title{
    font-size:1rem;
    font-weight:700;
    margin-bottom:10px;
}

#answer{
    line-height:1.6;
    white-space:pre-wrap;
}

/* -----------------------------------------------------------------------
   Vision status badge  (#9)
   Sits between the "Answer" panel title and the answer text.
   Status colours give instant at-a-glance feedback on what the camera did.
----------------------------------------------------------------------- */
.vision-status-badge {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    padding: 3px 9px;
    border-radius: 20px;
    margin-bottom: 10px;
    /* Default / fallback */
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.55);
}

/* Camera frame accepted and used in retrieval */
.vision-status--ok {
    background: rgba(0, 200, 83, 0.15);
    color: #00c853;
}

/* moondream returned a valid response but scene was non-landmark */
.vision-status--discarded {
    background: rgba(255, 152, 0, 0.15);
    color: #ff9800;
}

/* moondream response had too few recognised fields */
.vision-status--low_fields {
    background: rgba(255, 152, 0, 0.15);
    color: #ff9800;
}

/* Field count passed but STRUCTURE key was missing or a placeholder echo */
.vision-status--no_structure {
    background: rgba(255, 152, 0, 0.15);
    color: #ff9800;
}

/* moondream call threw an exception, or solo-noise pre-flight rejection */
.vision-status--error {
    background: rgba(229, 57, 53, 0.15);
    color: #e53935;
}

/* No image was sent — GPS-only answer */
.vision-status--no_image {
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.4);
}

.object-card{
    background:#262626;
    border-radius:12px;
    padding:12px;
    margin-bottom:10px;
}

.object-name{
    font-size:1rem;
    font-weight:700;
    margin-bottom:6px;
}

.object-meta{
    opacity:.8;
    font-size:.9rem;
}

@media(max-width:600px){
    .controls{
        grid-template-columns:1fr;
    }
    .logo{
        font-size:1.1rem;
    }
}
/* << - frontend/css/style.css */